CSS 그리드(grid) 기본

display: grid;

// 자식들을 그리드 방식으로 정렬한다.

 

grid-template-columns: 30px 30px 30px;

// 그리드의 가로 길이와 칸 수를 정한다.

 

grid-template-rows: 30px 30px;

// 그리드의 세로 길이와 칸 수를 정한다.

 

 

grid-auto-flow: row; // 또는 column;

// 그리드의 확장 방향을 설정

 

grid-auto-rows: 30px; // 또는 grid-auto-columns: 30px;

// 그리드의 개수가 template에서 지정해준 수보다 많으면

// auto-flow와 이 설정에 따라서 자동으로 확장된다.

 

gap: 10px; // grid-gap을 대체한다.

// 그리드 사이의 간격 설정