Grid layout property

웹 페이지의 레이아웃을 2차원(행과 열) 격자 형태로 완벽하게 제어할 수 있는 CSS 그리드(Grid) 레이아웃에 대해 알아보겠습니다.

Flexbox가 1차원(한 방향) 레이아웃에 강하다면, Grid는 가로와 세로를 동시에 설계하는 복잡한 레이아웃의 끝판왕입니다.

---

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

그리드의 틀을 짜는 설정들입니다.

• display: grid;: 해당 요소를 그리드 컨테이너로 선언합니다.
• grid-template-columns / grid-template-rows: 열(Columns)과 행(Rows)의 크기와 개수를 지정합니다.
  • fr 단위: 가용 공간을 비율로 나눕니다. (예: 1fr 2fr은 1:2 비율)
  • repeat() 함수: 반복되는 크기를 쉽게 설정합니다. (예: repeat(3, 1fr))
• gap (또는 grid-gap): 그리드 아이템 사이의 간격을 설정합니다.

---

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

각 요소가 그리드 안에서 어느 칸을 차지할지 결정합니다.

• grid-column / grid-row: 아이템이 시작하고 끝나는 '선(Line)' 번호를 지정하여 영역을 차지합니다.
  • span 키워드: 몇 칸을 차지할지 지정합니다. (예: grid-column: span 2;)
• grid-area: 아이템에 이름을 붙이거나, 행과 열의 범위를 한 번에 지정합니다.

---

3. grid-template-areas (직관적인 배치)

코드만으로 레이아웃의 형태를 그려볼 수 있는 아주 강력한 속성입니다.

CSS

 

.container {
  display: grid;
  grid-template-areas:
    "header header header"
    "sidebar content content"
    "footer footer footer";
}

.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.content { grid-area: content; }
.footer { grid-area: footer; }

---

🖥️ 실전 예제 코드: "신문 스타일 레이아웃"

HTML

 

<style>
  .grid-wrapper {
    display: grid;
    /* 3열로 나누고, 가운데 열은 너비의 2배 */
    grid-template-columns: 1fr 2fr 1fr;
    /* 행의 크기를 자동으로 조절 */
    grid-template-rows: auto 200px auto;
    gap: 15px;
    padding: 10px;
  }

  .item {
    background-color: #3498db;
    color: white;
    padding: 20px;
    text-align: center;
    border-radius: 8px;
  }

  /* 헤더는 첫 번째 줄 전체(3열)를 차지 */
  .header {
    grid-column: 1 / 4;
    background-color: #2c3e50;
  }

  /* 메인 콘텐츠는 2열을 차지 */
  .main {
    grid-column: span 2;
  }

  /* 푸터도 전체를 차지 */
  .footer {
    grid-column: 1 / 4;
    background-color: #7f8c8d;
  }
</style>

<div class="grid-wrapper">
  <div class="item header">Header</div>
  <div class="item main">Main Content</div>
  <div class="item sidebar">Sidebar</div>
  <div class="item footer">Footer</div>
</div>

---

📋 그리드 주요 속성 요약표

카테고리	속성	설명
컨테이너	grid-template-columns	열의 개수와 너비 정의
컨테이너	grid-template-rows	행의 개수와 높이 정의
컨테이너	gap	그리드 셀 사이의 여백
아이템	grid-column	열 시작/끝 위치 지정
아이템	grid-row	행 시작/끝 위치 지정
아이템	grid-area	아이템의 영역 이름 또는 범위

---

학습 정리

• fr 단위는 유연한 레이아웃을 위해 꼭 익혀두어야 합니다.
• **repeat(auto-fit, minmax(200px, 1fr))**를 사용하면 미디어 쿼리 없이도 완벽한 반응형 그리드를 만들 수 있습니다.
• 그리드 라인 번호는 1부터 시작하며, -1을 쓰면 마지막 라인을 의미합니다.

---

2차원 레이아웃의 최강자인 그리드까지 마스터하셨습니다!

---