[CSS] 9. Grid-column

Mar 10, 2025


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

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

        .grid-item {
            background-color: #bad4e9;
            padding: 20px;
            border: 1px solid black;
            text-align: center;
        }

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

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

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

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

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

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

<body>
    <div class="grid-container">
        <div class="grid-item header">header</div>
        <div class="grid-item aside">aside</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 footer">footer</div>
    </div>
</body>

</html>

See more posts

[CSS] 9. Grid-column

More articles

[CSS] 11. Position

[CSS] 10. Input 디자인

[CSS] 8. Grid-gap

[CSS] 7. flex 비율 나누기