[CSS] Grid

 

 

grid 컨테이너 설정

grid-template-columns / grid-template-rows 

그리드 열, 행 크기 지정.

grid-template-columns: 40px 50px auto 50px 40px;  //그리드 5개생성

grid-template-columns: repeat(5, 10px) //10px 크기 그리드 5개 생성 

grid-template-columns: repeat(5, 1fr) //1fr(비율)의 그리드 5개 생성

 

gap

그리드 간 간격. 가로 간격(Column gap), 세로 간격(Row gap) 분리 가능.