Css GridTemplate Areas

Css GridTemplate Areas

 

Css GridTemplate 개요

 

그리드 템플릿 영역을 만들어 배치 가능하다.

 

display:grid;
grid-template-columns:repeat(3, 1fr);
grid-template-rows:repeat(3, 100px);
grid-template-areas: 
  "box1 box2 box3"
  "box4 . box4"
  "box5 box5 box6";

한 줄에 들어갈 내용들은 큰따옴표(" ")로 묶는다.
빈 영역은 마침표'.'를 넣어 공간을 할당한다.