grid-template

See the Pen grid-template by nilgi (@nilgi) on CodePen.

 

.gt1 {
display: grid;
grid-template-columns: auto auto auto auto; / 4열 모두 크기가 같음. 자동.
grid-gap: 7px;
}

.gt2 {
display: grid;
grid-template-columns: 30px 100px auto 20px; / 각 열의 크기를 정한다.
grid-gap: 7px;
}

.gt3 {
display: grid;
grid-template-columns: auto auto auto auto;
grid-template-rows: 30px 140px; / 행의 크기를 정한다.
grid-gap: 7px;
}