Flex와 Grid는 모두 웹 페이지의 레이아웃을 설계하기 위해 사용된다.
오늘은 이 둘에 대해 알아보며, 각각 어떤 상황에서 사용하는 것이 좋을지 알아보려고 한다.
Flex란?
MDN 공식문서에 따르면, Flex는 1차원 레이아웃 모델로 설계되었다고 한다. 여기서 차원은 '축'이라는 개념으로 이해하면 쉽다. Flex에는 container와 item이라는 개념으로 구성되며, 각각에 맞는 값들을 설정하여 레이아웃을 구성할 수 있다. 이때, 사용되는 값들은 앞서 언급한 '축'과 관련되어 있다.
그림과 같이 주축(main-axis)과 교차축(cross-axis)으로 구성되며, flex는 한 방향으로만 내부의 요소를 배치한다.
때문에, 비교적 간단한 레이아웃을 구성하는 경우에 적합하며, 로그인 페이지, 회원가입 페이지 등에서 적은 수의 input 요소와 버튼 들이 같은 간격으로 배치되므로, flex를 사용하기에 적합하다.
flex와 관련하여 도움이 될만한 페이지
Grid란?
2차원의 레이아웃 모델로, Flex와 비교하여 보다 복잡한 레이아웃을 구성하는 경우에 사용된다. 물론, Grid에서 구현하는 레이아웃을 Flex로도 구현이 가능하지만, 점점 복잡해질수록 Grid가 더 편리하게 레이아웃을 구성할 수 있다.
다음과 같이 크기가 각기 다른 요소들을 위와 같이 배치하는 경우에 Grid가 적합하다. 물론, 위의 사진은 flex로도 충분히 구현할 수 있지만, 점점 복잡해진다면 Grid가 보다 적합하다. 각기 다른 크기의 뉴스 카드로 이루어진 뉴스 플랫폼 페이지의 레이아웃을 구성하는 경우가 이에 해당된다.
Grid와 관련하여 도움이 될만한 페이지
