CSS 레이아웃 혁명: Grid와 Flexbox의 실전 적재적소 선택 가이드

과거의 `float`이나 `table` 속성으로 골치 아프게 마크업 레이아웃을 짜던 시대는 완전히 종식되었습니다. 현대 CSS 레이아웃은 Flexbox와 CSS Grid가 양분하고 있습니다. 하지만 여전히 많은 프론트엔드 개발자들이 두 개념의 차이를 모호하게 이해한 채 혼용하여 불필요하게 코드를 복잡하게 만듭니다. 두 레이아웃의 실전 선택 공식과 CSS 코드 예시를 해부합니다.

1. 1차원 정렬 Flexbox vs 2차원 정렬 Grid

두 기술은 본질적인 지향점이 완전히 다릅니다.

• Flexbox (1차원 정렬): 가로 방향(Row) 혹은 세로 방향(Column) 중 단일 축을 기준으로 요소를 나열할 때 사용합니다. GNB 내비게이션 바, 헤더 로고와 메뉴 배치에 최적입니다.
• CSS Grid (2차원 정렬): 가로(Row)와 세로(Column)를 동시 통제하는 격자무늬 바둑판식 구조를 구성할 때 사용합니다. 메인화면의 대시보드 블록 구조, 포토 갤러리 카드 보드에 최적입니다.

2. 실전 CSS 코드 예제

① 메뉴 바 구성의 왕: Flexbox Layout

헤더와 내부 버튼들을 양 끝으로 단단히 벌리며 세로 중앙 정렬을 만드는 Flexbox 구현 예제입니다.

/* Flexbox를 적용할 부모 컨테이너 */
.navbar {
  display: flex;
  justify-content: space-between; /* 가로 방향 양 끝 분배 정렬 */
  align-items: center;            /* 세로 방향 정중앙 정렬 */
  padding: 16px 24px;
  background-color: var(--bg-sub);
}

/* 내부 정렬 항목 */
.navbar__menu {
  display: flex;
  gap: 16px; /* 자식 요소들 간의 넉넉한 간격 보장 */
}

② 쇼핑몰 상품 보드의 최강자: CSS Grid Layout

화면 폭에 따라 카드의 가로 수량이 유동적으로 변하는 반응형 격자 카드 Grid 구현 예제입니다.

/* Grid를 적용할 반응형 카드 부모 컨테이너 */
.product-grid {
  display: grid;
  /* 1열의 최소폭은 280px로 보장하며 남은 공간을 자동 배분 */
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px; /* 바둑판 격자의 가로세로 일괄 여백 설정 */
}

/* 격자 내부 카드 아이템 */
.product-card {
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius);
  padding: 20px;
}

"가장 뛰어난 레이아웃 설계는 Grid 부모 틀 안에, 디테일한 콘텐츠 정렬 요소로 Flexbox 자식을 중첩(Nest) 기용해 시너지를 완성하는 데 있습니다."

3. 실전 라이브 데모 프리뷰 (Live Layout Preview)

아래 박스는 위에서 소개한 Flexbox와 Grid 속성으로 실제 구현한 데모입니다.

3. 요약: 언제 무엇을 쓸까?

콘텐츠 자체의 크기에 맞춰 일렬로 흐르게 배치하고 싶다면 Flexbox, 전체적인 레이아웃의 규칙적인 틀(격자)을 단단히 고정하고 채워나가고 싶다면 CSS Grid를 기용하십시오. 이 공식 하나로 레이아웃 코딩 효율을 200% 상향할 수 있습니다.