Grid ver2

1. justify-content / align-content

justify-content, align-content의 초기값은 stretch이다.

여기서 원래 초기값은 normal이지만, flexbox에서는 flex-start, grid는 stretch이다.

-> normal로 설정

된 이유는 범용적으로 사용할 수 있게 개발자들이 설정해둔 것이다.

 

원룸(가상 컨테이닝 블록)자체의 너비가 최대치로

justify-content: stretch;

align-content: stretch;

 

위와 같이 부모 컨테이너 안에서 이렇게 정렬이 된다.

 

아래와 같이 컨테이닝블록이 설정이 되어있다.

 

 

2. justify-items / align-items

justify-items : stretch(초기값) -> 아이템 1개 내부에서의 세로 정렬

align-items: stretch(초기값) -> 아이템 내부에서의 가로 정렬

 

원룸(가상 컨테이닝블록) 내부의 .frog가 최대치로

justify-items: stretch;

align-items: stretch;

 

• justify-items : center

 

• align-items: center

 

• justify-items : center  && align-items: center

 

위와 같이 자신의 컨테이닝블록안에서 정렬이 된다. 부모 컨테이너가 아닌 자식 컨테이너에서의 컨테이닝 블록이다.

 

간단하게 하자면 아래와 같다.

3. grid-template-columns: auto auto 

-> track에 영향을 끼치게 된다. 이러한 식으로 값을 준다면, 아래와 같은 그림으로 생성이 된다.

-> colums로 두개의 상자가 생기는 것이다. 

 

이것은 생성 순서이다.

 

근데 여기서 만약에 안에 컨텐츠가 들어간다면,  비율이 틀어진다. 이를 방지하기 위해서 주는 속성이 1fr이다.

1fr는 안에 내부 컨텐츠로 인하여 비율이 틀어지는 것이 없게 하는 것이다.

 

하지만, 여기에 엄청나게 큰 이미지가 들어간다면 어떻게 될 것인가?

 

이러한 이미지가 들어간다면, 요소 크기에 맞추려면 min-width:0 / min-height: 0을 줘야한다

아이템에 직접 min(0, * )하는 것 말고 컨테이너 기준에서 안정성을 확보한다.
➡️ 자식에게 해주지 않고 부모에게 하는 것이 minmax

 

여기서 단축속성이 있는데,

min-width와 min-height를 지정해주면서, 부모 컨테이너에서 안정성 확보하는 것

두 개의 칼럼 예약 : minmax(0, 너비) 개념으로, min-width: 0 초기화 해주는 기법 구현,

그리드 컨테이너에서 안정성 확보

grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);

repeat(횟수(2), 무엇을(minmax(0(min-width), 1fr(max-width))) )

단축속성 grid-template-columns: repeat( 2, minmax(0, 1fr) );

 

 

두 개의 로우 예약

minmax(0, 높이) 개념으로, min-height: 0 초기화 해주는 기법 구현

그리드 컨테이너에서 안정성 확보

grid-template-rows: minmax(0, 1fr) minmax(0, 1fr);

단축속성

grid-template-rows: repeat( 2, minmax(0, 1fr) );

여기서 

grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));

위와 같은 코드를 준다면 브라우저의 사이즈를 줄이더라도 조절이 된다. 

auto-fit은 200px를 기준으로 창이 줄어들 때 자동으로 줄어들게 조절해주는 것이다.

 

4. 개발자 도구에서 그리드 번호 확인하기

개발자 도구에서 셀 번호를 확인할 수 있는데, 이 번호를 바탕으로 셀의 시작점과 끝나는 점을 알 수 있다. 이를 통해 셀을 늘리고 줄이는게 가능하다

 

여기서 grid를 클릭해야 보인다.

 

 

클릭하며 위와 같이 보인다.

grid-column-start: 1; → 칼럼 셀의 시작점

grid-column-end: 3; → 칼럼 셀의 끝점

 

5. grid-auto-flow

초기값 row인데, column을 추가 채울 수 없을땐, 새로운 row를 만들었다

만약 여기에 더 추가가된다면 사이즈는 grid-auto-rows: auto가 담당한다.

 

5-1. grid-auto-flow: row

 

 

5-2. grid-auto-flow: column

column으로 바뀌면 row를 추가하다가 더이상 채울 수 없으면 column을 추가한다

만약 여기에 더 추가가된다면 사이즈는 grid-auto-columnss:auto가 담당한다.

 

기본적인 상황이 있다. 상자를 배치해야할 때

.item.active {
background-color: orangered;
grid-column-start: 2;
grid-row-start: auto;
}

 

 

 

 

2번째 상황

.item.active {
background-color: orangered;
grid-column-start: 1;
grid-row-start: auto;
}

(auto는 브라우저가 판단하는 값) 마크업 순서를 최대한 유지하려고 노력함

이런식으로 바뀌는 데 브라우저가 알아서 계산하여 줄바꿈이 일어나는데, 마크업 순서를 유지하면서 그리드 칼럼 스타트 1이 성립되게 만들어준다.

아래와 같이 브라우저는 최대한 grid-column-start: 1을 유지하려고 노력한다. 

 

 

3번째 상황

grid-column-start: 1

grid-row-start: 2

→ 이렇게 column, row을 고정적 위치를 명시했다면 이 요소를 먼저 배치 한 후, 나머지 요소들이 마크업 기준에서 배치한다.

 

 

 

여기서 단축 속성을 사용할 수 있는데,

grid-column-start: 1 && grid-column-end: 3 

= grid-column: 1 / 3 ( 시작점 / 끝점 )
= grid-column: 1 / span 2 ( 시작점 / 두칸 차지 )

 

여기서 만약에 - 값이 들어간다면. 나중에 col이 늘어나도 유지가 된다. 

 

 

셀 병합을 통해 만들어진 영역이 된다면 에어리어(Area)뜻한다.

 

 

간단하게 말하자면

1. 둘다 auto 인 경우에는 (알아서 위치를 조정하여 브라우저가 마크업에 따라 배치를 한다.)

2. 둘 중 하나만 auto || 하나는 명시 (-> 브라우저가 마크업에 따라 임의로 판단)

-> grid : column-start: auto 일때

-> row 가 auto 일 때

3. 둘다 명시 

브라우저가 마크업 순서를 최대한 유지하면서 생기는 일들이 있다.