[TIL] Flex vs Grid

단순한 차원의 정렬, 배치는 Flex, 복잡한 테이블 형태의 정렬, 배치는 Grid

Flex와 Grid, 모두 CSS에 있는 속성으로 웹 페이지의 레이아웃을 잡는데 사용된다. 그러나 두 속성의 차이를 잘 이해하지 못하면 어떤 속성을 써야 할지 헤깔리는 경우도 있고, 하나의 속성에 대해서만 학습하여 그 속성만 활용하는 경우도 있다.

쉽게 말하자면 둘의 차이는 구현하고자 하는 레이아웃이 1차원적인지, 2차원적인지로 나뉠 수 있다. flex는 1차원 적인 개념이다. flex의 축은 주축과 보조축으로 구성되고, 주축은 고정된 것이 아니라, 흐름이 가로로 되어 있으면 가로축이 주축이 되고, 흐름이 세로로 되어 있으면 세로축이 주축이 된다. 반면 grid는 2차원적인 개념으로, 행축과 열축으로 구성되어 있다. 즉, 요소의 흐름과 상관없이 행축과 열축의 방향은 변하지 않는다.

이러한 특성을 고려해보면 둘이 어떤 경우에 쓰일지 명확해진다. flex는 주로 수평정렬, 가운데 정렬 같이 단순한 차원의 정렬, 배치를 해야할 때 쓰인다. 한편 grid는 x, y축을 모두 고려해서 레이아웃을 정해야 할 때 가령 복잡한 형태의 테이블 레이아웃을 만들어야 할 때 사용하면 된다.