그리드
<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-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)) : 지정된 크기를 유지한채로 자동채우기