[CSS] 7. Grid-Layout

Mar 10, 2025

Contents

1. Grid VS Flex 2. Grid 3. grid-template-columns 4. grid-gap 5. flex로 박스 내 비율을 직접 작성하여 설정하기 6. grid-column & grid-row 7. 예제

1. Grid VS Flex

1. Flex

한 방향 레이아웃 (가로 또는 세로)

2. Grid

두 방향 레이아웃 (가로 & 세로)

2. Grid

display 속성 중 하나

display : grid; 로 지정

그리드 컨테이너 : 그리드 전체 영역으로 그리드 아이템을 담고 있다.

그리드 아이템 : 그리드 컨테이너의 자식으로 그리드 규칙에 의해 배치된다.

그리드 라인 : 그리드 셀을 구분하는 선 (가로선, 세로선 둘 다 포함)

그리드 트랙 : 그리드의 열 또는 행

그리드 셀 : 그리드 한 칸

그리드 영역 : 그리드 라인으로 둘러싸인 사각형 영역이자 셀의 집합

그리드 번호(number) : 그리드 라인의 각 번호

3. grid-template-columns

명시적 열(트랙)의 크기 지정

여러가지 단위 지원 : fr/ px / repeat함수 … (섞어서 사용 가능)

1fr 1fr 1fr = 1 : 1 : 1 = 1/3 1/3 1/3

columns 부분에 rows를 넣으면 명시적 행(track)의 크기 지정

4. grid-gap

grid 셀 사이의 간격

행/열 지정 순서 :

세로축 / 가로축
row-gap (행 사이의 간격) column-gap (열 사이의 간격) 순서

grid-row-gap

grid-column-gap


grid-gap: 20px 5px;
				 (row-gap:20px column-gap:5px)


<!DOCTYPE html>
<html lang="en">
<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>

5. flex로 박스 내 비율을 직접 작성하여 설정하기

flex : 비율값


<!DOCTYPE html>
<html lang="en">
<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>

❗

클래스명 2개 지정 가능

e.g. <div class = "grid-item item9">9</div>

⇒ grid-item 이라는 이름, item9라는 이름

6. grid-column & grid-row

각 셀의 영역을 지정한다.

시작점 / 개수 span

e.g. grid-column: 1 / 4 span;
e.g. grid-row: 1 / 4 span;


<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        .grid-container {
            background-color: #2196F3;
            padding: 10px;
            display: grid;
            grid-template-columns: 1fr 1fr 1fr 1fr;
        }

        .grid-item {
            background-color: #a9d4f7;
            padding: 20px;
            border: 1px solid black;
        }
        .item9{
            grid-column: 1 / 4 span;
        }


    </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 item9">9</div>
    </div>
    </div>
</body>
</html>

grid-column = 3 / 2 span 으로 할 경우


<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        .grid-container {
            background-color: #2196F3;
            padding: 10px;
            display: grid;
            grid-template-columns: 1fr 3fr 1fr;
        }

        .grid-item {
            background-color: #a9d4f7;
            padding: 20px;
            border: 1px solid black;
        }
        
        .header{
            grid-column: 1 / 3 span;
        }
        .footer{
            grid-column: 1 / 3 span;
        }

    </style>
</head>
<body>
    <div class = "grid-container">
        <div class = "grid-item header">1</div>
        <div class = "grid-item nav">2</div>
        <div class = "grid-item section">3</div>    
        <div class = "grid-item aside">4</div>
        <div class = "grid-item footer">5</div>
    </div>
    </div>
</body>
</html>

7. 예제

❗

아래의 사진처럼 만들어보자!

grid-row와 grid-column을 둘 다 설정해두는 게 좋다. - > 나중에 무너질 수도 있음


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

        .grid-item {
            background-color: #a9d4f7;
            padding: 20px;
            border: 1px solid black;
        }
        .header{
            grid-column: 1 / 3 span;
            grid-row: 1 / 1 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 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>

<!DOCTYPE html> <html lang="en"> <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>

<!DOCTYPE html> <html lang="en"> <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>

<!DOCTYPE html> <html lang="en"> <head> <style> .grid-container { background-color: #2196F3; padding: 10px; display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; } .grid-item { background-color: #a9d4f7; padding: 20px; border: 1px solid black; } .item9{ grid-column: 1 / 4 span; } </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 item9">9</div> </div> </div> </body> </html>

<!DOCTYPE html> <html lang="en"> <head> <style> .grid-container { background-color: #2196F3; padding: 10px; display: grid; grid-template-columns: 1fr 3fr 1fr; } .grid-item { background-color: #a9d4f7; padding: 20px; border: 1px solid black; } .header{ grid-column: 1 / 3 span; } .footer{ grid-column: 1 / 3 span; } </style> </head> <body> <div class = "grid-container"> <div class = "grid-item header">1</div> <div class = "grid-item nav">2</div> <div class = "grid-item section">3</div> <div class = "grid-item aside">4</div> <div class = "grid-item footer">5</div> </div> </div> </body> </html>

<!DOCTYPE html> <html lang="en"> <head> <style> .grid-container { background-color: #2196F3; padding: 10px; display:grid; grid-template-columns: repeat(4, 1fr); } .grid-item { background-color: #a9d4f7; padding: 20px; border: 1px solid black; } .header{ grid-column: 1 / 3 span; grid-row: 1 / 1 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 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>