Grid

기존의 flex 보다 조금 더 유연하고 편리하게 Element를 구성하기 위해서 Grid가 나왔다.

 

Column & Row

column은 '열'을 의미하고 row는 '행'을 의미한다. 하지만, 혼란을 없애기 위해서 앞으로는 column은 세로, row는 가로라고 이해를 하자.

 

Template

가로 세로 구획을 나눌 때 부모요소에 우리는 template을 사용할 수 있다.

grid-template-column -> 세로를 몇 개로 나눌지 결정

grid-template-row -> 가로를 몇 개로 나눌지 결정

 

각가을 나눌때는 auto 혹은 단위(fr: Fraction)을 사용한다.

.parentNormal {
	display: grid;
    grid-template-columns: auto auto;
    grid-template-rows: auto auto;
}

.parentFraction {
	display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
}

 

grid-column-gap / grid-row-gap / grid-gap

가로 또는 세로 사이의 간경을 정의한다

 

Content / Items

속성: start | center | end | stretch

content가 들어가면 자식 요소들이 2줄 이상으로 줄이 바뀐 상태를 정렬한다.

items가 들어가면 자식 요소들이 줄이 바뀌지 않은 상태의 1줄일 경우를 정렬한다.

 

Self

자식요소 정렬을 부모요소의 정렬에 관계 없이 개별적으로 배치한다.

속성: start | center | end | stretch

ex) justify-self: end

 

Start / End

grid-column-start, grid-column-end -> 세로의 시작 위치와 끝 위치를 나타낸다.

grid-row-start, grid-row-end -> 가로의 시작 위치와 끝 위치를 나타낸다.

이를 한 줄로 표현하면, grid-column / grid-row 으로도 표현 할 수 있다.

 

 

Grid 레이아웃의 특이한 점은 라인을 기준으로 크기를 결정한다. 위 그림을 보면서 이해하자.

Column이 3개라면 Column 라인은 4개가 있다. 로우도 마찬가지 논리이다.

따라서 만약 칼럼을 1,2를 한번에 채우고 싶으면 아래와 같이 작성해야한다.

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

 

Grid Area

자식요소 가로 세로 시작위치에서 가로 세로 종료 위치까지의 영역을 지정한다.

 

Grid Row

row 순서를 변경하고 싶을 때 사용한다.

Order

Cell 순서를 변경을 하고 싶을 때 사용한다.

Grid Template Areas / Grid Area / Grid Row

 

Repeat

grid-template-columns / rows 에서 사용하기 유용하다.

 

Min Max