grid-column, row

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

 

.gc {
     display: grid;
     grid-template-columns: auto auto auto auto auto;
     grid-gap: 5px;
}
.i1 {
     grid-column: 1 / 4; 아이템1의 열을 1에서 시작해 4열의 시작점까지 확장
}
.i4 {
     grid-column: 1 / span 4; 아이템4의 열을 1에서 시작해 4칸 확장
}
.i7 {
     grid-column: 2 / span 2;
}

.gr {
     display: grid;
     grid-template-columns: auto auto auto auto auto;
     grid-gap: 5px;
}
.r1 {
     grid-row: 1 / 4; 아이템1의 행을 1에서 시작해 4행의 시작점까지 확장
}
.r4 {
     grid-row: 1 / span 2; 아이템4의 행을 1에서 시작해 2칸 확장
}