🧱 Grid Layout 완전 정복 – 1차원 vs 2차원, 실전 예제

🧱 Grid Layout 완전 정복 – 1차원 vs 2차원, 실전 예제

CSS Grid는 Flexbox와 함께 가장 강력한 레이아웃 도구입니다. Flexbox가 1차원(가로나 세로) 정렬에 최적화되었다면, Grid는 2차원(가로+세로) 레이아웃을 위한 도구로 더 강력한 구조 표현이 가능합니다.

---

1️⃣ Flexbox vs Grid 비교

구분	Flexbox	Grid
정렬 방향	1차원 (row or column)	2차원 (row + column)
배치 방식	내용 기반	레이아웃 기반
복잡한 구조	구현 어려움	자유롭게 가능
정렬 목적	항목 정렬 중심	레이아웃 구성 중심

---

2️⃣ Grid 기본 구조

.container {
  display: grid;
  grid-template-columns: 200px 1fr 2fr;
  grid-template-rows: auto 100px;
  gap: 10px;
}

• grid-template-columns: 열(column) 정의
• grid-template-rows: 행(row) 정의
• gap: 행/열 간격

위 예시는 총 3열, 2행으로 구성된 그리드입니다.

---

3️⃣ fr 단위 – 그리드 전용 분할 단위

• 1fr은 나머지 공간을 자동으로 나눔
• 비율 기반 열 생성이 가능

.grid {
  display: grid;
  grid-template-columns: 1fr 1fr 2fr; /* 25%, 25%, 50% 비율 */
}

---

4️⃣ Grid 항목 위치 지정

• grid-column, grid-row으로 위치 지정 가능

.item1 {
  grid-column: 1 / 3; /* 1~2번 열 차지 */
  grid-row: 1 / 2;
}

👆 특정 요소를 원하는 위치에 정확하게 배치할 수 있습니다.

---

5️⃣ 반복되는 열/행 생성 – repeat() 함수

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 동일한 3열 */
}

반복적인 패턴을 간결하게 정의할 수 있습니다.

---

6️⃣ 자동 배치와 auto-fit/auto-fill

.grid {
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

• auto-fit: 공간이 남으면 빈 칸 없이 채움
• auto-fill: 공간이 남아도 빈 칸 유지
• minmax(): 최소~최대 너비 설정

반응형 카드 레이아웃 구현에 매우 유용한 패턴입니다.

---

7️⃣ 실전 예제: 카드형 레이아웃

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
}

👆 화면 크기에 따라 자동으로 카드 개수가 유동적으로 배치됩니다.

---

📌 정리

• Grid는 2차원 레이아웃에 강력하며 비율 + 위치 지정이 핵심
• fr, repeat(), auto-fit 조합으로 반응형 구현 가능
• grid-column, grid-row로 세밀한 위치 제어

---

📌 다음 글 예고

다음 글: “CSS float의 역사와 사용법 (그리고 지금 왜 잘 안 쓰는지)”에서는 과거에 많이 쓰였던 float의 원리와 한계, 현재의 대체 기술에 대해 설명합니다.