CSS 그리드 라인 네이밍 이용하는 방법과 grid-auto-flow: dense

.parent { // 부모

    ...

    grid-template-columns: [first] 1fr [second] 1fr [third] 1fr [fourth] 1fr;

}

 

.child:first-child { // 자식

    ...

    grid-column-start: second;

    grid-column-end: fourth;

    // 2번째 칸부터 4번째 칸 전까지를 합친다.

}

 

 

grid-auto-flow: dense;

// 부모에 추가해야 한다.

// 어떻게든 빈 공간을 채운다.