작성 일자 : 2024-04-02

.container {
    width : 900px;
    border: 1px solid #cccccc;
    margin : 0px auto; /* 0px auto 두 번 반복으로 간단히 생략 */
}

.grid {
    display : grid;

    grid-template-columns: 200px 500px 200px;
    grid-template-rows: 100px 300px 100px;
}

.item {
    border: 1px solid #cccccc;
    padding : 5px;
}

<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>grid2</title>
        <link href="resources/css/grid2.css" rel="stylesheet" />
    </head>

    <body>
            <div class="container">
                <div class="grid">
                    <div class="item">1</div>
                    <div class="item">2</div>
                    <div class="item">3</div>
                    <div class="item">4</div>
                    <div class="item">5</div>
                    <div class="item">6</div>
                    <div class="item">7</div>
                    <div class="item">8</div>
                    <div class="item">9</div>
                </div>

            </div>
    </body>
</html>

실행 결과

실행 결과

.item:nth-child(1) {
    background-color: beige;
}

실행 결과

실행 결과

.item:nth-child(1) {
    background-color: beige;
    grid-column-start: 1; /* 첫 번째 세로줄부터 */
    grid-column-end: 4; /* 네 번째 세로줄까지 칸 합치기 */
    text-align: center; /* text 가운데 정렬 */
}

실행 결과

실행 결과

.item:nth-child(3) {
    background-color: azure;
    grid-column-start: 2;
    grid-column-end: 4;
}

.item:nth-child(4) {
    background-color: blueviolet;
    grid-column-start: 1;
    grid-column-end: 4;
    text-align: center;
}

<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>grid2</title>
        <link href="resources/css/grid2.css" rel="stylesheet" />
    </head>

    <body>
            <div class="container">
                <div class="grid">
                    <div class="item">
                        <h3>header 영역</h3> <!--label 입력-->
                    </div>
                    <div class="item">
                        <ul>
                            <li><a href="grid2.html">홈으로</a></li>
                            <li><a href="board.html">게시판</a></li>
                            <li><a href="admin.html">관리자</a></li>
                        </ul>
                    </div>
                    <div class="item">3</div>
                    <div class="item">
                        <h5>footer 영역</h5> <!--label 입력-->
                    </div>
            </div>
    </body>
</html>