[25] 05/09 자바스크립트 수업(2)

Noh Sinyoung·2023년 5월 9일
0

그리드

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

0개의 댓글