Css GridTemplate 개요

 

항목을 배치할때 가로와 세로를 모두 사용해서 배치가능하다.
(기존 플렉스박스 레이아웃의 경우 가로나 세로 중에서 하나를 주축으로 배치 가능하다)

 

주요값

'display: grid': Css GridTemplate layout을 사용한다고 지정.
grid-template-row: 가로 방향
grid-template-column: 세로 방향
grid-gap: 항목간 간격

 

display 값

grid: 컨테이너 안의 항목을 블록 레벨 요소로 배치.
inline-grid: 컨테이너 안의 항목을 인라인 레벨 요소로 배치.

Ex

display:grid;

 

참고

Css GridTemplate 개요

Css GridTemplate Row & Column

Css GridTemplate Gap 간격

Css GridTemplate Areas

Css GridTemplate Fraction

Css GridTemplate Repeat

Css GridTemplate minmax

Css GridTemplate Ex2

Css GridTemplate Ex1

 

그리드 레이아웃(grid layout);