[CSS] 8. Grid-gap

Mar 10, 2025


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

<head>
    <style>
        .grid-container {
            background-color: #2196f3;
            padding: 10px;
            display: grid;
            grid-template-columns: 1fr 10% 1fr;
            /* grid-row-gap: 10px;
            grid-column-gap: 10px; */
            grid-gap: 20px 50px;
        }

        .grid-item {
            background-color: #bad4e9;
            padding: 20px;
            border: 1px solid black;
        }
    </style>
</head>

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

</html>

See more posts

[CSS] 8. Grid-gap

More articles

[CSS] 10. Input 디자인

[CSS] 9. Grid-column

[CSS] 7. flex 비율 나누기

[CSS] 6. Flex - wrap