[HTML/CSS] 7. Grid Layout

문정준

Mar 07, 2025

Contents

1. 박스 배치의 한계 2. Grid

1. 박스 배치의 한계

Flexbox를 이용하여 내부 박스들을 Inline 속성으로 변화하여 정렬할 수 있음

화면의 비율에 따라서 설정은 가능하나, 박스 내부의 크기 비율로 정렬할 수 없음

2. Grid

그리드 형태로 배치하면 내부 박스들의 격자 배치를 편하게 설정할 수 있음

내부 요소들의 크기 비율 설정 가능
내부 요소들의 간격 설정 가능


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

<head>
    <style>
        .g-box {
            display: grid;
            grid-template-columns: 1fr 1fr 1fr;
            grid-gap: 20px 5px;
        }

        .g-box div {
            border: 1px solid black;
        }
    </style>
</head>

<body>
    <div class="g-box">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
        <div>6</div>
    </div>

</body>

</html>

1fr 1fr 1fr의 방식이 아닌, 박스 내에 비율을 직접 작성하여 설정 가능


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

<head>
    <style>
        div {
            border: 1px solid black;
            padding: 10px;
        }

        .f-box {
            display: flex;
            flex-wrap: wrap;
        }

        .b1 {
            flex: 1;
        }

        .b2 {
            flex: 4;
        }

        .b3 {
            flex: 1;
        }

        .b4 {
            flex: 2;
        }
    </style>
</head>

<body>

    <div class="f-box">
        <div class="b1">1</div>
        <div class="b2">1</div>
        <div class="b3">1</div>
        <div class="b4">1</div>
    </div>

</body>

</html>

See more posts

[HTML/CSS] 7. Grid Layout

1. 박스 배치의 한계

2. Grid

[HTML/CSS] 10. CSS : Position

[HTML/CSS] 8. Input Design

[HTML/CSS] 6. CSS Flexbox

[HTML/CSS] 5. CSS : Display