그리드

    <style>
        *{margin: 0; padding: 0;}
        #container > div {background-color: aquamarine; border: 1px solid black;}
        #container {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            /*grid-template-columns: repeat(auto-fill, minmax(200px, auto));*/
            grid-template-rows: 1fr 4fr 3fr 2fr;
            gap: 10px 20px;
            align-items: center;
            justify-content: center;
        }
    </style>

    <div id="container">
        <div>아이템1</div>
        <div>아이템2</div>
        <div>아이템3</div>
        <div>아이템4</div>
        <div>아이템5</div>
        <div>아이템6</div>
        <div>아이템7</div>
        <div>아이템8</div>
        <div>아이템9</div>
        <div>아이템10</div>
        <div>아이템11</div>
        <div>아이템12</div>
    </div>

grid - template - columns : 가로 정렬 및 크기 지정

grid - template - rows : 세로 정렬 및 크기 지정

gap : 박스 간 간격 조정

repeat(auto-fill, minmax(200px, auto)) : 지정된 크기를 유지한채로 자동채우기