CSS 레이아웃 마스터: Flexbox와 Grid

Flexbox와 Grid는 CSS 레이아웃의 양대 산맥입니다. 두 가지를 모두 이해하고 상황에 맞게 사용하면 어떤 레이아웃도 쉽게 구현할 수 있습니다.

Flexbox 기초

Flexbox는 1차원 레이아웃을 위한 도구입니다. 한 방향(가로 또는 세로)으로 요소를 배치합니다.

.container {
  display: flex;

  /* 방향 */
  flex-direction: row;      /* 가로 (기본값) */
  flex-direction: column;   /* 세로 */

  /* 주축 정렬 */
  justify-content: flex-start;   /* 시작점 */
  justify-content: center;       /* 중앙 */
  justify-content: flex-end;     /* 끝점 */
  justify-content: space-between; /* 양끝 정렬 */
  justify-content: space-around;  /* 동일 간격 */

  /* 교차축 정렬 */
  align-items: stretch;    /* 늘리기 (기본값) */
  align-items: flex-start; /* 시작점 */
  align-items: center;     /* 중앙 */
  align-items: flex-end;   /* 끝점 */

  /* 줄바꿈 */
  flex-wrap: nowrap;  /* 한 줄 (기본값) */
  flex-wrap: wrap;    /* 여러 줄 */

  /* 간격 */
  gap: 16px;
}

Flex 아이템 속성

.item {
  /* 늘어나는 비율 */
  flex-grow: 0;   /* 늘어나지 않음 (기본값) */
  flex-grow: 1;   /* 남은 공간을 채움 */

  /* 줄어드는 비율 */
  flex-shrink: 1; /* 공간이 부족하면 줄어듦 (기본값) */
  flex-shrink: 0; /* 줄어들지 않음 */

  /* 기본 크기 */
  flex-basis: auto;  /* 콘텐츠 크기 (기본값) */
  flex-basis: 200px; /* 고정 크기 */

  /* 단축 속성 */
  flex: 1;        /* grow:1, shrink:1, basis:0% */
  flex: 0 0 200px; /* grow:0, shrink:0, basis:200px */

  /* 개별 정렬 */
  align-self: center;
}

Flexbox 실전 패턴

/* 수직 수평 중앙 정렬 */
.center {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* 네비게이션 바 */
.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* 카드 레이아웃 */
.card-container {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

.card {
  flex: 1 1 300px; /* 최소 300px, 늘어날 수 있음 */
}

Grid 기초

Grid는 2차원 레이아웃을 위한 도구입니다. 행과 열을 동시에 다룹니다.

.container {
  display: grid;

  /* 열 정의 */
  grid-template-columns: 200px 1fr 200px;  /* 3열 */
  grid-template-columns: repeat(3, 1fr);   /* 동일한 3열 */
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); /* 반응형 */

  /* 행 정의 */
  grid-template-rows: auto 1fr auto;

  /* 간격 */
  gap: 16px;
  row-gap: 20px;
  column-gap: 16px;
}

Grid 아이템 배치

.item {
  /* 위치 지정 */
  grid-column: 1 / 3;      /* 1열부터 3열 전까지 */
  grid-column: span 2;     /* 2열 차지 */
  grid-row: 1 / 3;         /* 1행부터 3행 전까지 */

  /* 단축 속성 */
  grid-area: 1 / 1 / 3 / 3; /* row-start / col-start / row-end / col-end */
}

Grid 영역 이름

.container {
  display: grid;
  grid-template-columns: 200px 1fr 200px;
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    "header header header"
    "sidebar main aside"
    "footer footer footer";
}

.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main { grid-area: main; }
.aside { grid-area: aside; }
.footer { grid-area: footer; }

Grid 실전 패턴

/* 반응형 카드 그리드 */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
}

/* 12열 그리드 시스템 */
.grid-12 {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 16px;
}

.col-6 { grid-column: span 6; }
.col-4 { grid-column: span 4; }
.col-3 { grid-column: span 3; }

/* 대시보드 레이아웃 */
.dashboard {
  display: grid;
  grid-template-columns: 250px 1fr;
  grid-template-rows: 60px 1fr;
  grid-template-areas:
    "sidebar header"
    "sidebar content";
  height: 100vh;
}

Flexbox vs Grid 선택 기준

Flexbox가 적합한 경우

• 요소를 한 줄로 배치할 때
• 콘텐츠 크기에 따라 유동적으로 배치할 때
• 네비게이션, 버튼 그룹 등

Grid가 적합한 경우

• 전체 페이지 레이아웃
• 카드 그리드
• 복잡한 2차원 배치
• 정확한 위치 지정이 필요할 때

함께 사용하기

/* Grid로 전체 레이아웃 */
.page {
  display: grid;
  grid-template-columns: 250px 1fr;
  grid-template-rows: auto 1fr auto;
}

/* Flexbox로 헤더 내부 배치 */
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* Flexbox로 카드 내부 배치 */
.card {
  display: flex;
  flex-direction: column;
}

.card-footer {
  margin-top: auto; /* 하단에 고정 */
}

마무리

Flexbox와 Grid는 서로 대체재가 아닌 보완재입니다. 상황에 맞게 선택하고, 필요하면 함께 사용합니다.

1차원 배치는 Flexbox, 2차원 배치는 Grid라고 기억하면 됩니다.