개발자라면 새로운 프로젝트를 맡았을 때 어떤 방식으로 문제에 접근할지 고민하게 됩니다. 반응형 웹사이트를 작업할 때는 레이아웃 도구로 CSS Grid와 CSS Flexbox 중 하나를 선택하는 경우가 매우 많습니다. 이 글에서는 Grid와 Flexbox의 차이점을 살펴보고, 어떤 상황에서 어느 쪽을 선택하는 것이 좋은지 알아보겠습니다.
Flexbox – 핵심 개요
CSS Flexbox는 기본적으로 반응형 박스 모델입니다. 컨테이너 내부에서 요소를 더 유연하게 배치할 수 있게 해주며, 각 속성의 특성만 잘 이해하면 비교적 쉽게 구현할 수 있습니다.
플렉시블 박스 모델 역시 기존 박스 모델의 속성(margin, padding, border, content)을 그대로 사용합니다. 부모 컨테이너에 display: flex를 지정하면, 해당 부모의 자식 요소들에게 적용할 수 있는 다양한 flex 속성들이 활성화됩니다.
주요 Flexbox 속성
- flex-direction: column | row* | column-reverse | row-reverse — 아이템이 배치되는 주축의 방향을 결정합니다.
- flex-wrap: wrap | nowrap* | wrap-reverse — 아이템이 한 줄에 모두 들어가지 않을 때 줄바꿈 여부를 설정합니다.
- flex-flow: 위 두 속성의 축약형으로,
flex-flow: <flex-direction> <flex-wrap>형식으로 작성합니다. - justify-content: 주축(main axis)을 따라 아이템 사이의 간격을 배분합니다. flex-direction이 row면 주축은 가로축, column이면 세로축입니다.
- justify-content: flex-start* | flex-end | center | space-evenly | space-around | space-between
- align-items: 주축과 교차하는 축(cross axis)을 따라 아이템을 정렬합니다.
- align-items: stretch* | center | flex-start | flex-end | baseline
- align-self: 부모의 display 속성이 'flex'로 선언된 플렉스 아이템에 개별적으로 적용할 수 있으며, 플렉스 컨테이너 안에서 해당 아이템의 정렬을 제어합니다.
- align-self: auto* | stretch | center | flex-start | flex-end | baseline
* – 해당 속성의 기본값(default)
CSS Grid – 핵심 개요
CSS Grid는 또 하나의 레이아웃 모델입니다. Flexbox보다 조금 더 최신 기술이기 때문에 브라우저 지원 범위는 Flexbox에 비해 다소 좁습니다. Grid를 사용하면 행(row)과 열(column)을 활용한 2차원 레이아웃을 정교한 위치 지정과 함께 구성할 수 있습니다. 부모 요소에 display: grid를 지정하면 다양한 grid 속성을 사용할 수 있게 됩니다.
주요 CSS Grid 속성
- grid-gap, grid-column-gap, grid-row-gap: 격자 셀 사이의 간격을 설정합니다. grid-gap은 열 간격과 행 간격을 동시에 제어하는 축약형입니다.
- grid-template-columns, grid-template-rows: 그리드 내 컨테이너의 기본 구조를 정의합니다. 열의 너비, 행의 높이, 각 행에 배치할 셀의 개수 등을 지정할 수 있습니다.
- justify-content: 그리드 전체를 가로 방향으로 정렬합니다.
- align-content: 그리드 전체를 세로 방향으로 정렬합니다.
- grid-column, grid-row: 그리드 아이템이 차지할 너비나 높이(셀 범위)를 지정합니다.
그렇다면 무엇을 선택해야 할까?
CSS Flexbox의 속성들은 1차원 레이아웃 설계에 적합합니다. 즉, 행(row) 또는 열(column) 중 한 방향으로만 레이아웃을 구성하게 됩니다. 이는 콘텐츠의 정확한 위치 배치보다 반응형 디자인의 유연성이 더 중요한 웹 페이지에 잘 어울립니다.
반면 CSS Grid는 행과 열을 함께 활용하는 2차원 공간에서 레이아웃을 만들 수 있습니다. 그리드 안의 각 컨테이너에 대한 배치, 너비, 높이를 제어하는 속성들이 있어서, 마치 스테인드글라스 창문처럼 정교하게 나뉜 격자형 레이아웃도 손쉽게 구현할 수 있습니다.
콘텐츠의 위치 배치에 집중하고 자식 컨테이너를 공간상에서 세밀하게 제어하고 싶다면 Grid가 적합합니다. Flexbox는 배치 자체보다는 콘텐츠의 흐름(flow)에 더 중점을 둡니다.
또한 Grid의 브라우저 지원은 Flexbox만큼 폭넓지 않습니다. Flexbox가 Grid보다 먼저 등장한 기술이기 때문인데, 프로젝트에 어떤 레이아웃 모델을 적용할지 결정할 때 이 점도 고려 대상이 될 수 있습니다.
결론
어떤 레이아웃 모델을 선택하든, 두 가지 모두 문제 해결을 위한 유효한 선택지입니다. 결국 프로젝트의 목적이 무엇인지에 따라 CSS Flex 레이아웃과 CSS Grid 레이아웃 중 무엇을 사용할지가 결정됩니다.