CSS - Grid(그리드) 사용법

<div class="container">
    <div class="item">A</div>
    <div class="item">B</div>
    <div class="item">C</div>
    <div class="item">D</div>
    <div class="item">E</div>
    <div class="item">F</div>
    <div class="item">G</div>
    <div class="item">H</div>
    <div class="item">I</div>
</div>

<style>
    .item{
        border: 1px solid red;
    }
    .container{
        display: grid;

        grid-template-columns: 200px 200px 500px;
        /* grid-template-columns: 1fr 1fr 1fr; */
        /* grid-template-columns: repeat(3, 1fr); */
        /* grid-template-columns: 200px 1fr; */
        /* grid-template-columns: 100px 200px auto; */

        grid-template-rows: 200px 200px 500px;
        /* grid-template-rows: 1fr 1fr 1fr; */
        /* grid-template-rows: repeat(3, 1fr) */
        /* grid-template-rows: 200px 1fr; */
        /* grid-template-rows: 100px 200px auto; */
    }
</style>   

---

출처:https://studiomeal.com/archives/533

이번에야말로 CSS Grid를 익혀보자