[TIL] CSS Flexbox와 Grid의 차이점

매일메일이라는 서비스를 이용해 TIL을 작성하려고 한다.

매일메일에서 질문을 받고 해당 질문에 대해 공부하는 방식이다.

매일메일은 기술면접 질문을 매일 메일로 보내주는 서비스이다. 혹시 서비스가 궁금할 수 있는 사람들을 위해 아래 링크를 첨부한다!

https://www.maeil-mail.kr/

매일메일 - 기술 면접 질문 구독 서비스

 

오늘의 질문은 CSS Flexbox와 Grid의 차이점에 대해 설명하는 것이다.

 

첫번째

Flexbox는 1차원 레이아웃이지만, Grid는 2차원 레이아웃이다.

• Flexbox는 1차원 레이아웃 속성으로 row 또는 column 중 하나를 기준으로 요소를 정렬하고 배치하는 데 최적화되어 있다. 주로 행이나 열 중 하나의 방향으로 정렬해야 할 때 유용하며 복잡한 행과 열을 모두 포함하는 레이아웃에서는 다소 한계가 있다.
• Grid는 2차원 레이아웃 속성으로 행과 열을 모두 사용해 요소를 배치할 수 있다. 따라서 복잡한 레이아웃을 구성하거나 웹페이지의 전체적인 구조를 잡는 데 적합하다.

두번째

사용 목적의 차이다.

• Flexbox는 콘텐츠 중심으로 콘텐츠가 추가되거나 줄어들 때 유연하게 대처하기 좋다.
  예를 들어 수평 또는 수직 방향으로 콘텐츠를 정렬하고 간격을 조절하는 데 유용하며,
  버튼 그룹, 내비게이션 바 등 한 줄의 콘텐츠가 주가 되는 구성에 적합하고
• Grid는 레이아웃 중심으로 페이지 구조를 구성하는 데 최적화되어 있다.
  예를 들어 카드 레이아웃, 갤러리 형식 등 명확하게 구분된 영역을 기반으로 레이아웃을 구성할 때 Grid가 효과적이다.

세번째

기본 동작의 차이다.

• Flexbox에서는 주로 요소가 컨테이너의 크기나 위치에 맞춰 자동으로 정렬된다. Flexbox의 justify-content와 align-items 속성을 사용해서 주 축 방향으로 요소들을 배치하고 여백을 조절할 수 있다.
• Grid는 행과 열을 사전에 정의하고 그 격자(grid cell)에 요소를 배치하는 방식이다. Grid에서는 grid-template-rows, grid-template-columns와 같은 속성으로 행과 열의 크기를 정의하고 각 요소의 위치를 세밀하게 설정할 수 있다.