Grid Layout 과 요소

 

🟢  Grid Layout (그리드 레이아웃)

행(row)과 열(column)을 동시에 다룰 수 있는 2차원 레이아웃 방식.

 

🔹 display: grid (정렬의 시작)

요소를 grid Container(플렉스 컨테이너)로 만드는 가장 기본적인 선언.

.container {
  display: grid;
}

 

👉 fr (fraction) 비율 단위 🔥핵심🔥

사용 가능한 공간을 비율로 나누는 유연한 단위.

.container {
  /* 100px을 제외한 나머지 공간을 1:2로 나눔 */
  grid-template-columns: 100px 1fr 2fr;
  grid-template-rows: 1fr 2fr;
  /* 1:2 비율 (전체를 3등분) */
}

• fr 은 고정값이 아닌 비율 기반 단위.

 

1️⃣ Grid Container 속성 (부모 요소)

그리드 전체의 구조(행과 열)를 정의하고, 레이아웃의 기본 틀을 설정.

🔹 grid-template-columns

열(column) 크기와 개수를 정의하는 속성.

.container {
  grid-template-columns: 200px 200px 200px;
}

• px, %, fr 등 다양한 단위 사용 가능.

 

🔹 grid-template-rows

행(row) 크기와 개수를 정의하는 속성.

.container {
  grid-template-rows: 200px 200px 200px;
}

• auto 사용 시 콘텐츠 크기에 따라 높이 자동 결정.
• px, %, fr 등 다양한 단위 사용 가능.

 

🔹 gap

Grid에서 행(row)과 열(column) 사이의 간격을 설정.

.container {
  gap: 20px;
}

✔️ 또는 각각의 간격도 설정 가능.

.container {
  row-gap: 10px;
  column-gap: 20px;
}

 

🔹 repeat() 함수

행과 열의 반복되는 값을 간단하게 작성.

.container {
  /* 총 3개의 열을 동일한 비율 1fr 로 생성 */
  grid-template-columns: repeat(3, 1fr);
}

 

🔹 minmax()

최소값(min)과 최대값(max)을 설정.

.container {
  /* 총 3개의 열이 생성되고, 각 열의 최소 너비는 100px이고 공간이 충분하면 최대 1fr까지 확장 */
  grid-template-columns: repeat(3, minmax(100px, 1fr));
}

 

🔹 auto-fill / auto-fit 

반응형 레이아웃 에서 컨테이너 크기에 따라 열(column)의 개수를 자동으로 조정.

.container {
  /* 각 열의 최소 너비는 200px, 공간이 남으면 1fr 까지 확장,
  화면 크기에 따라 열 개수가 자동으로 늘어나거나 줄어듦 */
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

• auto-fill: 공간이 남아도 빈 칸을 유지.
• auto-fit: 빈 칸을 제거하고 요소를 꽉 채움. (반응형에서 자주 사용)
• 핵심 패턴: minmax() 와 함께 사용.

 

🔹  grid-template-areas

각 영역에 직관적인 이름을 붙여 배치 가능한 속성.

<style>
.container {
  display: grid;
  grid-template-columns: 200px 1fr 1fr;
  grid-template-rows: 100px 300px 100px;
  grid-template-areas:
    "header header header"
    "sidebar main ."
    "footer footer footer";
  gap: 10px;
}

.header { grid-area: header; background: lightblue; }
.sidebar { grid-area: sidebar; background: lightgreen; }
.main { grid-area: main; background: lightcoral; }
.footer { grid-area: footer; background: lightgray; }
</style>

<div class="container">
  <div class="header">헤더</div>
  <div class="sidebar">사이드바</div>
  <div class="main">본문</div>
  <div class="footer">푸터</div>
</div>

• 부모 요소 설정: grid-template-areas를 사용해 마치 바둑판을 그리듯 큰따옴표 안에 영역 이름을 배치.
• 자식 요소 매핑: grid-area: 영역이름; 을 선언하면 부모가 정의한 영역에 들어감.
  • 영역 이름과 grid-area 값이 정확히 일치해야 한다.
  • 영역 이름은 중복 가능.
• 빈칸 처리: .(마침표)를 사용하면 그 칸은 빈 공간으로 남겨둔다.

 

---

 

2️⃣ Grid Item 속성 (자식 요소)

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

 

👉 Grid Lines (그리드 라인)

그리드 라인은 그리드 열과 행을 구분하는 눈에 보이지 않는 선.

• 번호 체계: 라인 번호는 항상 1부터 시작. 3열짜리 그리드라면 세로 라인은 1번부터 4번까지 존재.
• 음수 번호: 끝에서부터 거꾸로 셀 수도 있으며, 마지막 선은 항상 -1.
• 활용: grid-column과 grid-row 속성을 사용하여 특정 아이템이 몇 번 선부터 몇 번 선까지 차지할지 결정.

 

🔹 grid-column

열(column)에서 시작과 끝 위치 지정.

.item {
  /* 1번 라인부터 3번 라인까지 */
  grid-column: 1 / 3;
}

 

🔹 grid-row

행(row)에서 시작과 끝 위치 지정.

.item {
  grid-row: 1 / 3;
}

---

👇 축약형 👇

.item {
  grid-column: span 2; /* 2칸 차지 */
}

• span: 몇 칸을 차지할지 지정.

 

🔹 grid-area 축약형

한 번에 행/열 모두 지정.

.item {
  grid-area: 1 / 1 / 3 / 3;
}

• 문법: grid-area: row-start / col-start / row-end / col-end;

 

 

📍  POINT 📍 

✔️ fr 은 가용 공간을 비율로 나누는 단위, 유연한 레이아웃에 필수. ✔️

✔️ repeat(auto-fit, minmax(200px, 1fr)) 를 사용하면 미디어 쿼리 없이도 완벽한 반응형 그리드 가능. ✔️

✔️ 그리드 라인 번호는 1부터 시작하며, -1을 쓰면 마지막 라인을 의미합니다. ✔️

✔️ 그리드 라인은 미세하고 정교한 배치가 필요할 때, 템플릿 영역은 전체적인 레이아웃의 구조를 한눈에 파악하고 싶을 때 유용하다. ✔️

 

 

📋 그리드 주요 속성 요약표 📋

카테고리	속성	설명	팁
컨테이너	grid-template-columns	열의 개수와 너비 정의	repeat(3, 1fr)처럼 반복 패턴 활용 가능
컨테이너	grid-template-rows	행의 개수와 높이 정의	높이를 자동(auto)로 두면 콘텐츠에 맞춰 조절 가능
컨테이너	grid-template-areas	영역 이름을 바둑판식으로 배치	이름만 바꿔서 반응형 레이아웃 쉽게 재배치 가능
컨테이너	gap	그리드 셀 사이의 간격	row-gap, column-gap 따로 지정 가능
아이템	grid-column	열 시작/끝 위치 지정	1 / -1은 전체 열 차지, span 2로 연속 칸 차지
아이템	grid-row	행 시작/끝 위치 지정	span 3으로 현재 위치에서 3칸 차지
아이템	grid-area	아이템의 영역 이름 또는 범위	grid-template-areas의 이름과 일치시켜야 함

 

---

 

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

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