CSS 그리드 자유롭게 배치하기 - grid-template-area

<div class="parent">

    <div class="firstChild">firsChild</div>

    <div class="secondChild">secondChild</div>

    <div class="thirdChild">thirdChild</div>

    <div class="fourthChild">fourthChild</div>

</div>

 

 

.parent {

    display: grid;

    grid-auto-rows: 100px;

    grid-auto-columns: 100px;

    grid-template-areas: "firstChild firstChild firstChild"

                                        "secondChild secondChild fourthChild"

                                        "thirdChild thirdChild fourthChild";

    /* 위 모양 대로 생성된다. */

    border: solid 10px gray;

}

.firstChild {

    grid-area: firstChild;

    background-color: plum;

}

.secondChild {

    grid-area: secondChild;

    background-color: powderblue

}

.thirdChild {

    grid-area: thirdChild;

    background-color: seashell;

}

.fourthChild {

    grid-area: fourthChild;

    background-color: wheat;

}