[HTML/CSS] 7. Grid-Layout

김미숙

Mar 10, 2025

Contents

기본 개념 그리드의 주요 속성

‼️

복잡한 웹 레이아웃을 만들 때 매우 유용한 레이아웃 시스템입니다. flexbox와 비슷하지만, 더 정밀한 2D 레이아웃을 구성할 수 있으며, 가로와 세로 두 축을 모두 다룰 수 있습니다.

기본 개념

그리드 컨테이너: display: grid;를 사용하여 그리드 컨테이너를 만듭니다. 이 컨테이너 내에서 자식 요소들이 그리드 항목이 됩니다.

그리드 항목: 그리드 컨테이너 내부의 자식 요소들입니다. 이 요소들은 행과 열로 배치됩니다.

그리드의 주요 속성

1. 그리드 컨테이너 속성 (부모 요소에 적용)

속성	설명
`display: grid;`	요소를 그리드 컨테이너로 지정
`grid-template-columns`	열(컬럼)의 개수와 크기 설정 (`100px 200px 1fr` 등)
`grid-template-rows`	행(로우)의 개수와 크기 설정 (`100px auto 1fr` 등)
`grid-template-areas`	그리드 영역을 명명하고 배치 (`"header header" "sidebar main"`)
`gap` / `row-gap` / `column-gap`	행과 열 간격 조절 (`gap: 10px 20px;`)
`justify-items`	셀 내 아이템의 수평 정렬 (`start`, `center`, `end`, `stretch`)
`align-items`	셀 내 아이템의 수직 정렬 (`start`, `center`, `end`, `stretch`)
`justify-content`	그리드 전체의 수평 정렬 (`start`, `center`, `end`, `space-between` 등)
`align-content`	그리드 전체의 수직 정렬 (`start`, `center`, `end`, `space-between` 등)

2. 그리드 아이템 속성 (자식 요소에 적용)

속성	설명
`grid-column`	아이템의 시작/끝 열 지정 (`grid-column: 1 / 3;`)
`grid-row`	아이템의 시작/끝 행 지정 (`grid-row: 2 / 4;`)
`grid-area`	`grid-template-areas`에서 정의된 영역에 배치
`justify-self`	개별 아이템의 수평 정렬 (`start`, `center`, `end`, `stretch`)
`align-self`	개별 아이템의 수직 정렬 (`start`, `center`, `end`, `stretch`)

3. 기타 유용한 단위 및 기능

fr (Fractional Unit) : 비율 기반 크기 설정 (grid-template-columns: 1fr 2fr;)

repeat() : 반복 패턴 적용 (grid-template-columns: repeat(3, 1fr);)

minmax(min, max) : 최소-최대 크기 설정 (grid-template-columns: minmax(100px, 1fr);)

auto-fit vs auto-fill : 자동 크기 조정 (grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));)


<!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>


<!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: #b0d7f7;
        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>


<!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: #b0d7f7;
        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>
  </body>
</html>

Contents

기본 개념 그리드의 주요 속성

<!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>

<!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: #b0d7f7; 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>

<!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: #b0d7f7; 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> </body> </html>