CSS 그리드 예제

 

<div class="grid">

    <div class="gridItem"></div>

    <div class="gridItem"></div>

    <div class="gridItem"></div>

    <div class="gridItem"></div>

    <div class="gridItem"></div>

</div>

 

:root {

    --colorOne: mistyrose;

    --colorTwo: cornsilk;

    --colorThree: honeydew;

}

 

.grid {

    display: grid;

    grid-template-columns: 1fr 1fr 1fr; /* 열만 설정하고 행은 알아서 늘어나게 */

    grid-auto-rows: 200px;

}

 

.grid .gridItem:nth-child(1) {

    background-color: var(--colorOne);

}

 

.grid .gridItem:nth-child(2) {

    background-color: var(--colorTwo);

}

 

.grid .gridItem:nth-child(3) {

    grid-row: span 2;

    background-image: url(https://cdn.pixabay.com/photo/2020/03/09/23/04/plum-4917370__480.jpg);

}

 

.grid .gridItem:nth-child(4) {

    grid-column: 1 / 3;

    background-color: var(--colorThree);

}