Flexbox와 Grid

Flexbox와 Grid는 CSS 레이아웃을 구성하는 주요 css로, 각각 다른 목적으로 사용한다.

Flexbox

Flexbox는 일차원 레이아웃 모델로, 주로 한 방향(행 또는 열)으로 아이템들을 정렬하는 데 사용된다.

Flexbox는 요소 간의 공간 분배와 정렬을 쉽게 할 수 있게 해준다.

주요 개념 및 속성

• 컨테이너와 아이템: Flexbox 레이아웃은 flex 컨테이너와 그 안에 포함된 flex 아이템으로 구성된다.
• 주 축과 교차 축: 주 축(main axis)은 flex 아이템이 배치되는 기본 방향(수평 또는 수직)이며, 교차 축(cross axis)은 주 축과 수직인 방향이다.
• flex-direction: flex 아이템의 배치 방향을 설정한다.
  • row (기본값): 수평으로 배치
  • row-reverse: 수평으로 배치하되 순서 반전
  • column: 수직으로 배치
  • column-reverse: 수직으로 배치하되 순서 반전
• justify-content: 주 축을 따라 아이템을 정렬한다.
  • flex-start: 시작 부분에 정렬
  • flex-end: 끝 부분에 정렬
  • center: 중앙에 정렬
  • space-between: 아이템 사이에 균일한 간격을 둠
  • space-around: 아이템 주위에 균일한 간격을 둠
• align-items: 교차 축을 따라 아이템을 정렬한다.
  • stretch (기본값): 아이템을 컨테이너의 높이에 맞게 늘림
  • flex-start: 교차 축 시작 부분에 정렬
  • flex-end: 교차 축 끝 부분에 정렬
  • center: 교차 축 중앙에 정렬
  • baseline: 텍스트 기준선에 맞춰 정렬
• flex-wrap: 아이템이 한 줄에 모두 배치되지 않을 경우 줄 바꿈을 할지 설정한다.
  • nowrap (기본값): 줄 바꿈 하지 않음
  • wrap: 줄 바꿈 함
  • wrap-reverse: 줄 바꿈을 반대 방향으로 함

 

Grid

Grid는 이차원 레이아웃 모델로, 행과 열을 동시에 제어할 수 있다.

Grid는 복잡한 레이아웃을 보다 간편하게 구성할 수 있게 해주는 역할을 한다.

주요 개념 및 속성

• 컨테이너와 아이템: Grid 레이아웃은 grid 컨테이너와 그 안에 포함된 grid 아이템으로 구성된다.
• grid-template-rows 및 grid-template-columns: 행과 열의 크기를 설정한다.
  • 예: grid-template-columns: 200px 1fr 3fr;
• grid-template-areas: 레이아웃을 이름으로 정의할 수 있다.
  • 예:

grid-template-areas:
  "header header header"
  "sidebar content content"
  "footer footer footer";

• grid-gap: 행과 열 사이의 간격을 설정한다.
  • grid-row-gap: 행 간의 간격
  • grid-column-gap: 열 간의 간격
• justify-items: 그리드 셀 내부에서 아이템을 수평으로 정렬한다.
  • start, end, center, stretch
• align-items: 그리드 셀 내부에서 아이템을 수직으로 정렬한다.
  • start, end, center, stretch
• grid-column 및 grid-row: 아이템이 그리드 내에서 차지할 위치와 크기를 설정한다.
  • 예: grid-column: 1 / 3; (1번 라인부터 3번 라인까지 차지)

 

비교

장점

• Flexbox는 주로 한 방향으로 정렬할 때 유용하며 간단한 레이아웃을 만들거나 요소 간의 간격을 균등하게 배치할 때 사용한다.
• Grid는 복잡한 이차원 레이아웃을 구성할 때 유용하다. 전체 페이지의 레이아웃을 디자인하거나, 복잡한 구성 요소 배치를 관리할 때 사용한다.

단점

• Flexbox는 주로 한 방향으로 요소를 배치하기 때문에 복잡한 이차원 레이웃을 구성하는데는 적합하지 않다.
• Flexbox는 요소 간의 정렬과 간격 조정엔 좋지만 Grid와 비교했을 때 세밀한 레이아웃 제어가 부족하다.
• Grid는 단순한 일차원 레이아웃을 구성할 땐 Flexbox에 비해 복잡하고 과도할 수 있다.
• Grid는 오래된 브라우저에서는 지원이 제한적일 수 있다.

각각 다른 장단점을 가졌기 때문에, 사용 상황에 맞게 필요한 기능을 사용하면 된다.