CSS Grid layout 가이드

grid란 ‘격자’라는 뜻이며, 사전적 의미는 ‘바둑판 눈금과 같은 동일한 크기의 정방형 혹은 준 정방형 배열’입니다.

flexbox layout보다 좀더 복잡한 레이아웃을 만들때 grid layout을 사용 할 수 있습니다.

grid layout은 행과 열이 있기 때문에 플로트나 위치지정 (position) 없이도 쉽게 레이아웃을 디자인 할 수 있습니다.

ex )

gird는 기본적으로 flex와 동일하게 컨테이너와 아이템으로 구분되어있습니다.
( 컨테이너는 아이템을 wrapping하고 있는 부모입니다. )

1~9를 포함하고 있는 붉은 테두리 - container
1~9 - 각각의 item

그리드 컨테이너의 속성과 의미

1
2
3
4
5
6
7
8
9
10
11
12

display: 그리드를 정의합니다.
grid-template: 아래의 grid-template-***의 속성을 단축해서 정의합니다.
grid-template-rows: 그리드 행의 크기를 정의합니다.
grid-template-columns: 그리드 열의 크기를 정의합니다.
grid-template-areas: 그리드 영역의 이름을 생성합니다. 
gap(grid-gap): 아래의	***-gap의 속성을 단축해서 정의합니다.
row-gap(grid-row-gap): 행 사이의 간격값을 정의합니다.
column-gap(grid-column-gap): 열 사이의 값을 정의합니다.
place-content: align-content와 justify-content의 단축 속성
ex) place-content: center === align-conten: center && justify-content: center
place-item: align-item justify-item 단축 속성
ex) place-item: center === align-item: center && justify-item: center

그리드 아이템의 속성과 의미

1
2
3
4
5
6
7
8
9
10
11
12

grid-row: grid-row-xxx의 단축 속성(행 시작/끝 위치)
grid-row-start: 그리드 아이템(Item)의 행 시작 위치 지정
grid-row-end: 그리드 아이템의 행 끝 위치 지정
grid-column: grid-column-xxx의 단축 속성(열 시작/끝 위치)
grid-column-start: 그리드 아이템의 열 시작 위치 지정
grid-column-end: 그리드 아이템의 열 끝 위치 지정
grid-area: 영역(Area) 이름을 설정하거나, grid-row와 grid-column의 단축 속성
place-self: align-self와 justify-self의 단축 속성
align-self: 단일 그리드 아이템을 수직(열 축) 정렬
justify-self: 단일 그리드 아이템을 수평(행 축) 정렬
order: 그리드 아이템의 배치 순서를 지정
z-index: 그리드 아이템의 쌓이는 순서를 지정

grid-template-columns, grid-template-rows

grid-template-columns은 그리드열을 정의하며,
grid-template-rows는 그리드행을 정의합니다.

두 속성은 모두 repeat() 함수를 사용할수 있고, fr 단위를 사용할 수 있습니다.

ex )
grid-template-columns: repeat(3, 1fr) === grid-template-columns: 1fr, 1fr, 1fr
: 그리드의 열을 3열의 1fr 사이즈로 정의합니다.

repeat 함수는 두번째 인수를 반복하게 때문에
repeat(3, 1fr, 2fr, 3fr) === 1fr, 2fr, 3fr, 1fr, 2fr, 3fr, 1fr, 2fr, 3fr
위와 같이도 사용 할 수 있습니다.

grid-template-areas

grid-template-areas 는 grid의 영역에 이름을 부여하여 배치 하는 템플릿을 만듭니다.
. or none 으로 빈영역을 배치 할 수 있고, header와 footer는 빈영역을 생성할 수 없습니다.

1
2
3
4
5
6
7

<div class="grid-container">
  <div class="item test">test</div>
  <div class="item header">1</div>
  <div class="item main">2</div>
  <div class="item footer">3</div>
  <div class="item aside">aside</div>
</div>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

.grid-container {
  display: grid;
  grid-gap: 5px;
  grid-template-rows: repeat(4, 70px);
  grid-template-columns: repeat(3, 1fr);
  grid-template-areas:
    "header header header"
    "main test none"
    "main . aside"
    "footer footer footer";
}

.grid-container > * { 
    background-color: mediumseagreen;
}

.header { grid-area: header; }
.main { grid-area: main; background: yellow; }
.aside { grid-area: aside; background: blue; }
.footer { grid-area: footer }
.test { grid-area: test; background: red; }

row-gap, column-gap, gap

row-gap은 아이템 간의 간격 중 행의 크기 정의합니다.
column-gap은 아이템 간의 간격 중 열의 크기를 정의합니다.
gap은 row-gap, column-gap 두가지 속성을 단축하여 사용합니다.

ex ) row-gap: 10px, colume-gap: 5px, === gap: 10px 5px;

• grid-gap: 10px 0;

• row-gap, column-gap, gap 에 접두어로 grid-** 였는데 현재는 deprecate 되었다고 합니다.

grid-auto-rows, grid-auto-columns

그리드에는 명시적 정의와 암시적 정의가 존재하는데
grid-auto-rows, grid-auto-columns는 암시적으로 정의된 아이템의 크기를 정의합니다.

1
2
3
4
5
6
7

/container/
grid-auto-rows: 100px; // 암묵적으로 정의된 아이템의 행 크기
grid-auto-columns: 100px; // 암묵적으로 정의된 아이템의 열 크기

/item/
gird-row: 3 / 4  // 행의 3번과 4번 그리드에 배치
gird-colume: 3 / 4  // 열의 3번과 4번 그리드에 배치

암묵적 정의가 되어 해당 영역에 배치가되면 그리드 영역자체의 행과 열이 추가 되어집니다.

grid-auto-flow

grid-area로 배치하지 않은 아이템을 자동배치 알고리즘으로 처리할지 정의합니다.

• row: 각 행 축을 따라 차례로 배치합니다.
• column: 각 열 축을 따라 차례로 배치합니다.
• row dense: 각 행 축을 따라 차례로 배치, 빈 영역 채웁니다.
• column dense: 각 열 축을 따라 차례로 배치, 빈 영역 채웁니다.