[HTML/CSS]8. Gridlayout 실습

손영민

Mar 10, 2025

Contents

1. v1 2. v2

1. v1

https://blog.naver.com/codingspecialist/221415785447

2. v2

https://blog.naver.com/codingspecialist/221498513779


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

<head>
    <style>
        .grid-container {
            background-color: #2196F3;
            padding: 10px;
            display: grid;
            grid-template-columns: repeat(4, 1fr);
        }

        .grid-item {
            background-color: #c2dbf0;
            padding: 20px;
            border: 1px solid black;
        }

        .header {
            grid-column: 1 / 3 span;
        }

        .aside {
            grid-column: 4 / 1 span;
            grid-row: 1 / 2 span;
        }

        .nav {
            grid-column: 1 / 1 span;
            grid-row: 2 / 2 span;
        }

        .photo {
            grid-column: 2 / 2 span;
            grid-row: 2 / 1 span;
        }

        .section {
            grid-column: 2 / 3 span;
            grid-row: 3 / 1 span;
        }

        .footer {
            grid-column: 1 / 4 span;
            grid-row: 4 / 1 span;
        }
    </style>
</head>

<body>
    <div class="grid-container">
        <div class="grid-item header">header</div>
        <div class="grid-item nav">nav</div>
        <div class="grid-item photo">photo</div>
        <div class="grid-item section">section</div>
        <div class="grid-item aside">aside</div>
        <div class="grid-item footer">footer</div>
    </div>
</body>

</html>

See more posts

[HTML/CSS]8. Gridlayout 실습

1. v1

2. v2

More articles

[HTML/CSS]10. CSS Position

[HTML/CSS]9. Input 디자인

[HTML/CSS]7. Grid-Layout

[HTML/CSS]6. Flex