CSS Grid로 레이아웃을 어떻게 만드나요?

Question

Accepted Answer

**CSS Grid**는 2차원 레이아웃 시스템입니다 — Flexbox의 단일 선과 달리 **행과 열을 동시에** 제어합니다. 컨테이너에 grid를 정의하고 아이템을 그 안에 배치합니다.

```css
.grid {
  display: grid;
  grid-template-columns: 200px 1fr 1fr; /* 3개 열: 고정, 그다음 두 개 유연 */
  grid-template-rows: auto 1fr auto;     /* 3개 행 */
  gap: 1rem;                              /* 셀 사이 간격 */
}
```

## fr 단위와 repeat()

```css
grid-template-columns: repeat(3, 1fr);   /* 3개의 균등한 열 */
grid-template-columns: 1fr 2fr;          /* 두 번째 열이 첫 번째의 두 배 */
```

`fr`("fraction")은 가용 공간을 분배합니다 — `1fr 2fr`은 1:2로 나눕니다. `repeat(3, 1fr)`은 세 개의 균등한 트랙에 대한 단축 표현입니다.

## 미디어 쿼리 없는 반응형 grid

```css
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1rem;
}
```

이 한 줄이 완전히 반응형인 카드 grid를 만듭니다: 각 열은 최소 `250px`이고, 브라우저가 행마다 **가능한 한 많이** 맞추고 나머지를 줄바꿈합니다 — 데스크톱의 4개 열에서 모바일의 1개로 자동 전환됩니다. `auto-fit` + `minmax`는 Grid에서 가장 사랑받는 패턴 중 하나입니다.

## 셀에 걸쳐 아이템 배치하기

```css
.hero {
  grid-column: 1 / 3;  /* 열 선 1에서 3까지 걸침 (두 개 열) */
  grid-row: 1 / 2;
}
.featured { grid-column: span 2; } /* 현재 위치에서 2개 열 걸침 */
```

아이템은 여러 행/열에 걸칠 수 있어, Flexbox로는 어색한 매거진 스타일 레이아웃을 가능하게 합니다.

## Grid vs Flexbox

- **Grid** — 2D 레이아웃(행 *과* 열): 페이지 레이아웃, 카드 grid, 대시보드.
- **Flexbox** — 1D 레이아웃(단일 행 또는 열): navbar, 버튼 그룹, 가운데 정렬.

둘은 잘 어울립니다 — grid 셀 자체가 flex 컨테이너가 될 수 있습니다.

## 왜 중요한가

Grid는 가장 강력한 CSS 레이아웃 도구입니다 — 전체 페이지 레이아웃과 반응형 카드 grid를 깔끔하게 처리하며, 종종 중첩된 div 편법을 대체합니다.

`auto-fit`/`minmax` 반응형 패턴만으로도 많은 미디어 쿼리의 필요성을 없앱니다.