CSS Grid vs Flexbox 언제 뭘 쓰나요?

간단한 기준:

• Flexbox — 1차원 레이아웃 (한 줄/한 행)
• Grid — 2차원 레이아웃 (행 + 열 동시)

/* Flexbox — 네비게이션, 카드 한 줄 배치 */
.nav { display: flex; gap: 16px; align-items: center; }

/* Grid — 전체 페이지 레이아웃, 갤러리 */
.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 16px;
}

실무 기준:

• 헤더, 네비게이션, 버튼 그룹 → Flexbox
• 카드 그리드, 대시보드 레이아웃 → Grid
• 수직/수평 센터링 → 둘 다 가능 (Flexbox가 간편)

둘 다 배우고 상황에 맞게 쓰세요. 대부분 Flexbox를 더 자주 씁니다.