1. Grid란?
Flex와 마찬가지로 레이아웃을 구성하는 방식입니다.
다만 Flex는 1차원 레이아웃이라고 하여 단순한 반면, Grid는 행과 열이라는 2차원 레이아웃입니다.
Flex보다 복잡한 레이아웃을 만들 때 사용합니다.
Flex와 마찬가지로 container와 item으로 구성되지만 더 복잡한 구조를 가질 수 있는 만큼 사용할 수 있는 속성들도 더 다양합니다.
Grid를 테스트할 때는 브라우저에서 개발자도구를 연 후, grid버튼을 누르면 됩니다.
2. Grid Container 속성
display
: Grid 레이아웃임을 정의합니다.
컨테이너에 display:grid를 작성하면 그 컨테이너의 자식 요소들은 Grid Item들이 됩니다.
grid-template-rows
: 명시적인 행의 크기와 개수를 정의합니다.
grid-template-columns
: 명시적인 열의 크기와 개수를 정의합니다.
반복하는 것을 간소화하기 위해 repeat()함수를 사용할 수도 있습니다.
픽셀 대신 fr이라는 단위를 사용할 수도 있는데, 비율대로 크기를 나눈다는 의미입니다.
grid-template-rows: repeat(2, 1fr)은 grid-template-rows: 1fr 1fr이라는 의미이므로, 컨테이너의 높이 400px을 1:1로 나누는 것입니다.
px과 fr은 혼용할 수도 있습니다.
grid-template-areas
: 각 영역에 이름을 정하고 그것을 참조해 배치합니다.
주의점은 grid-area는 item의 속성이고, item에서 각각 이름을 지정하는 것입니다.
비우고 싶은 영역은 .나none으로 정의할 수 있습니다.
grid-template
: grid-template-xxx의 단축 속성
row-gap
: 각 행 사이의 간격을 지정합니다.
column-gap
: 각 열 사이의 간격을 지정합니다.
gap
: row-gap과 column-gap의 단축 속성입니다.
gap: <row-gap> <column-gap>의 순서로 정의합니다.
grid-auto-rows
: 암시적 행의 크기를 정의합니다.
암시적이라는 것은 grid-template-rows로 지정한 행 외의 행이 생길 때를 의미합니다.
grid-auto-columns
: 암시적 열의 크기를 정의합니다.
grid-auto-rows와 마찬가지로, 지정한 열 외의 열이 생길 때, 그 크기를 정의하는 것입니다.
grid-auto-flow
:아이템을 어떻게 정렬할지 정의합니다.
자동정렬 알고리즘입니다. 기본값인 row는 행 축을 따라 차례대로 배치합니다.
row dense는 빈 영역을 채웁니다.
row가 아닌 column으로 정의하면 열 축을 따라 배치하게 됩니다.
grid
: grid-template-xxx와 grid-auto-xxx의 단축 속성입니다.
align-content
: Grid Contents를 수직 정렬합니다. Contents의 세로 너비가 Container보다 작아야 합니다.
justify-content
: Grid Contents를 수평 정렬합니다. Contents의 가로 너비가 Container보다 작아야 합니다.
place-content
: 'align-content'와 'justify-content'의 단축 속성입니다.
align-items
: Items을 수직 정렬합니다. 아이템의 세로 너비가 아이템이 속한 행의 크기보다 작아야 합니다.
justify-items
: Items을 수평 정렬합니다. 아이템의 가로 너비가 아이템이 속한 행의 크기보다 작아야 합니다.
place-items
: 'align-items'와 'justify-items'의 단축 속성입니다.
3. Grid Item 속성
grid-row-start, grid-row-end, grid-column-start, grid-column-end
Item을 Line을 이용해 배치합니다.
여기서 Line은 각각의 셀을 구분해주는 선을 의미합니다.
개발자 도구에서 그리드를 테스트할 때 각각의 선마다 번호가 매겨진 것을 볼 수 있을 것입니다.
그 선의 시작과 끝을 지정함으로써 Item을 배치합니다. 좌표를 지정하는 것이라고 볼 수 있겠습니다.
span 키워드를 사용할 수도 있는데, span 2라고 하면 시작점에서 2만큼 확장된다는 뜻입니다.
grid-row
: grid-row-start과 grid-row-end의 단축 속성입니다.
grid-column
: grid-column-start과 grid-column-end의 단축 속성입니다.
grid-area
: grid-row-start, grid-column-start, grid-row-end, grid-column-end의 단축 속성입니다.
align-self
: Item을 수직 방향으로 정렬합니다.
그리드 아이템의 세로 너비가 자신이 속한 그리드 행의 크기보다 작아야 합니다.
justify-self
: Item을 수평(행 축) 방향으로 정렬합니다.
그리드 아이템의 세로 너비가 자신이 속한 그리드 열의 크기보다 작아야 합니다.
place-self
: align-self와 justify-self의 단축 속성입니다.
order
: 그리드 아이템이 자동 배치되는 순서를 변경할 수 있습니다. 숫자가 작을수록 앞쪽에 배치됩니다.
z-index
: 아이템이 쌓이는 순서를 변경합니다.
