[CSS] Grid, Flexbox 차이

Flexbox

Flexbox는 한 방향(가로 또는 세로)의 레이아웃을 관리하는 데 최적화되어 있습니다. 즉, 한 줄(row)이나 한 열(column)을 기준으로 요소를 배치하고 정렬합니다.
단일 행이나 열의 정렬이 필요한 상황에 적합합니다. 예를 들어, 내비게이션 바, 버튼 그룹, 카드 목록 등을 배치할 때 유용합니다.

• 주 축(main axis)과 교차 축(cross axis)을 기준으로 요소를 정렬합니다. flex-direction 속성으로 주 축을 설정할 수 있으며, 이 축을 기준으로 정렬이 이루어집니다.
• justify-content, align-items, align-self와 같은 속성으로 요소 간의 간격과 정렬을 손쉽게 조절할 수 있습니다.

.container {
  display: flex;
  flex-direction: row; /* 가로 방향 */
  justify-content: space-between; /* 요소 간의 간격 */
  align-items: center; /* 세로 정렬 */
}

Grid

Grid는 행(row)과 열(column) 모두를 기준으로 레이아웃을 구성할 수 있습니다. 복잡한 레이아웃을 만들 때 유리합니다.
웹 페이지의 전체 레이아웃, 대시보드, 포토 갤러리와 같은 복잡한 배치가 필요한 상황에서 사용됩니다.

• grid-template-rows와 grid-template-columns 속성을 사용해 행과 열의 크기를 정의할 수 있습니다.
• Grid에서는 컨테이너 내에서 격자(grid)를 정의하고, 각 항목을 격자의 셀에 배치할 수 있습니다. grid-row, grid-column 속성으로 항목의 위치를 조정할 수 있습니다.

.container {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr; /* 세 개의 열 정의 */
  grid-template-rows: auto; /* 행의 크기를 자동으로 설정 */
  gap: 10px; /* 격자 간 간격 */
}
.item1 {
  grid-column: 1 / 3; /* 첫 번째 항목은 첫 번째부터 두 번째 열까지 차지 */
}

차이

특징	Flexbox	Grid
차원	1차원 레이아웃 (가로 또는 세로)	2차원 레이아웃 (가로 + 세로)
주요 사용 사례	간단한 정렬, 단일 행/열 구성	복잡한 페이지 레이아웃, 대시보드, 포토 갤러리
요소 정렬 방식	주 축과 교차 축 기준으로 정렬	행과 열을 정의하고 격자 기반으로 정렬
복잡한 레이아웃 구현	제한적 (1차원)	유연하고 다양한 배치 가능 (2차원)

• Flexbox는 1차원 정렬(수평 또는 수직)에 강하며, 간단한 레이아웃이나 구성 요소의 정렬, 간격 조절에 적합합니다.
• Grid는 2차원 레이아웃(행과 열 모두)에 최적화되어 있으며, 복잡한 페이지 구성이나 대시보드와 같은 격자형 레이아웃에 유리합니다.