[CSS]Grid

Jan 29, 2024

Grid는 Flex와는 다르게 행과 열 두 방향으로 배치할 수 있다.

"grid-container"는 부모 요소를, "grid-item"은 자식 요소를 나타낸다.


<!DOCTYPE html>
<html>

<head>
    <style>
        .grid-container {

            background-color: #2196F3;
            padding: 10px;
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            /*grid-column-gap: 10px;
            grid-row-gap: 10px;
            */
            grid-gap: 10px;

        }

        .grid-item {
            background-color: rgba(255, 255, 255, 0.8);
            border: 1px solid rgba(0, 0, 0, 0.8);
            padding: 20px;
            font-size: 30px;

        }

        .g9 {
            color: red;
            grid-column: 1/3;
        }
    </style>
</head>

<body>

    <h1>Grid Elements</h1>

    <div class="grid-container">
        <div class="grid-item g1">1</div>
        <div class="grid-item g2">2</div>
        <div class="grid-item g3">3</div>
        <div class="grid-item g4">4</div>
        <div class="grid-item g5">5</div>
        <div class="grid-item g6">6</div>
        <div class="grid-item g7">7</div>
        <div class="grid-item g8">8</div>
        <div class="grid-item g9">9</div>
    </div>

</body>

</html>


grid-template-columns: 1fr 1fr 1fr;
            grid-column-gap: 10px;


grid-template-columns: 1fr 1fr 1fr;

            grid-row-gap: 10px;


grid-gap: 10px;


color: red;
            grid-column: 1/5;


<!DOCTYPE html>
<html>

<head>
    <style>
        .grid-container {
            background-color: #2196F3;
            padding: 10px;
            display: grid;
            grid-template-columns: 1fr 3fr 1fr;
            text-align: center;
        }

        .grid-item {
            background-color: rgba(255, 255, 255, 0.8);
            border: 1px solid rgba(0, 0, 0, 0.8);
            padding: 20px;
            font-size: 30px;
        }

        .g1 {
            grid-column: 1/4;
        }

        .g5 {
            grid-column: 1/4;
        }
    </style>
</head>

<body>
    <h1>Grid Elements</h1>
    <div class="grid-container">
        <div class="grid-item g1">1</div>
        <div class="grid-item g2">2</div>
        <div class="grid-item g3">3</div>
        <div class="grid-item g4">4</div>
        <div class="grid-item g5">5</div>
    </div>
</body>

</html>


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        .outer-box {
            width: 500px;
            height: 500px;
            background-color: skyblue;
            display: grid;
            justify-content: end;
            align-items: end;
        }

        .inner-box {
            width: 100px;
            height: 100px;
            background-color: red;
        }
    </style>
</head>

<body>
    <div class="outer-box">
        <div class="inner-box">1</div>
    </div>
</body>

</html>


justify-content: start;


justify-content: center;
align-items: center;


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        .outer-box {
            width: 500px;
            height: 500px;
            background-color: skyblue;
            display: grid;
            grid-template-columns: 1fr 1fr;
        }

        .inner-box1 {
            width: 100px;
            height: 100px;
            background-color: red;
        }

        .inner-box2 {
            width: 100px;
            height: 100px;
            background-color: blue;
        }

        .b2 {
            display: grid;
            justify-content: end;
        }
    </style>
</head>

<body>
    <div class="outer-box">
        <div class="b1">
            <div class="inner-box1">1</div>
        </div>
        <div class="b2">
            <div class="inner-box2">2</div>
        </div>


    </div>
</body>

</html>


grid-template-columns: auto auto;
justify-content: space-between;


grid-template-columns: auto auto auto;
justify-content: space-around;


<!DOCTYPE html>
<html lang="en">

<head>
    <style>
        .menu {
            display: grid;
            grid-template-columns: repeat(4, auto);
            justify-content: space-between;
        }

        .menu li {
            list-style-type: none;
        }

        .nav {
            display: grid;
            grid-template-columns: auto auto;
        }
    </style>
</head>

<body>
    <div class="nav">
        <div class="home">홈</div>
        <ul class="menu">
            <li>아우터</li>
            <li>바지</li>
            <li>악세사리</li>
            <li>신발</li>
        </ul>
    </div>


</body>

</html>


<!DOCTYPE html>
<html lang="en">

<head>
    <style>
        .nav {
            display: grid;
            grid-template-columns: auto auto auto;
            justify-content: space-between;
        }

        .main {
            padding: 0px 50px;
        }

        .menu {
            display: grid;
            grid-template-columns: auto auto auto;
            grid-column-gap: 10px;

        }

        .info {
            display: grid;
            grid-template-columns: auto auto auto;
            grid-column-gap: 10px;

        }
    </style>
</head>

<body>
    <div class="main">
        <div class="nav">
            <div class="logo">아이콘 로고</div>
            <div class="menu">
                <div>숙소</div>
                <div>체험</div>
                <div>온라인체험</div>
            </div>
            <div class="info">
                <div>당신의 공간을 에어비앤비하세요</div>
                <div>아이콘</div>
                <div>햄버거버튼</div>
            </div>
        </div>
    </div>


</body>

</html>

See more posts

[CSS]Grid

More articles

[실습]Airbnb 만들어보기

[CSS]Flex

웹 디자인 만들기

HTML 기본