일반적으로 CSS에서 레이아웃을 구성하기 위해 Flex와 Grid를 사용한다.
- Flex는 1차원 레이아웃 모듈로, 수평 혹은 수직 중 한 가지 방향으로만 나눌 수 있다.
- Grid는 2차원 레이아웃 모듈로, 수평과 수직 두가지를 동시에 나눌 수 있다. 즉, 요소를 행과 열로 배치할 수 있다.
✨ Flex를 사용하면 적합한 레이아웃
Flex는 간단한 코드로 flex container안에 있는 flex items을 유연하고 균등하게 구성할 수 있어서 반응형 웹 디자인에 적합하다. 그리고 네비게이션 바, 버튼, 입력 폼 등과 같은 작은 요소를 다룰 때도 유용하다. 하지만 1차원적인 레이아웃만 가능해서 복잡한 레이아웃 구성에는 어려움이 있다.
📐 Grid를 사용하면 적합한 레이아웃
Grid는 복잡하고 정교한 레이아웃 구성이 가능하고 아이템들의 위치과 크기를 정확하게 지정할 수 있는 장점이 있다. 예를 들면, 대시보드나 뉴스 기사 페이지 등과 같은 복잡한 레이아웃 혹은 이미지 갤러리와 제품 목록 등과 같이 다른 크기와 위치를 가지는 요소가 있을 경우 유용하다.
따라서 Flex와 Grid는 상황에 맞게 사용하는 것이 좋은데, Grid로 메인 컨텐츠 영역을 구성하고 Flex로 각 섹션을 구성하는 등의 방법이 있다.
