CSS Subgrid란 무엇이고 어떤 문제를 해결하나요?

Question

Accepted Answer

Subgrid는 중첩된 그리드 아이템이 **부모 그리드의 트랙을 그대로 상속**받을 수 있게 합니다.

**문제: Subgrid 없이**
```css
.grid { display: grid; grid-template-columns: 200px 1fr 100px; }
.card { display: grid; /* 별도 그리드 → 부모와 무관 */ }
```

**해결: Subgrid**
```css
.card {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: subgrid; /* 부모 열 트랙 상속 */
}
```

**실무 활용:**
- 카드 리스트: 여러 카드의 제목/설명/가격이 수직으로 완벽 정렬
- 폼 레이아웃: 레이블과 입력 필드가 부모 그리드와 정렬
- 대시보드: 중첩 위젯이 전체 그리드 시스템과 일관된 정렬

- 행(`grid-template-rows: subgrid`)에도 적용 가능
- 모든 모던 브라

CSS