[CSS] Grid vs Flexbox

... 들어가며

Html의 레이아웃을 정의하는 속성에는Float Grid Flexbox 3가지가 있습니다.

그렇다면 우리는 언제 어떤 레이아웃을 쓰는 것이 가장 이상적이고 현명한 마크업이라고 할 수 있을까?? 답을 먼저 말하자면 아직 이 질문에 대한 정답을 정확하게 내릴 수는 없다는 것이 학계의 점심이다.

하지만 그럼에도 불구하고 FlexBox와 Grid의 차이점에 대해서 끈임없는 물음표를 던지면서 어떻게 해야 각 목적에 맞게 레이아웃을 구성할 수 있는지 탐구하는 자세는 분명 필요하다.

🤔 각각의 레이아웃의 특징을 알아보자.

FlexBox

• 1차원 레이아웃 시스템이다.
• 박스의 방향지정이 가능하기에 매우 Flexible하다고 볼 수 있다.
• FlexBox 내에서 Flex-item들을 "정렬"하는데 특화되어 있다.
• 레이아웃의 작은 부분들을 관리하는데 용이하다.

Grid

• 2차원 레이아웃 시스템으로 행과 열에 대한 동시조작이 가능하다.
• 행과 열의 개수를 정의해야 한다. (Flex보다 비교적 유연하지 못하다.)
• 행과 열만 명확하게 지정가능하다면 Flex보다 복잡한 레이아웃을 쉽게 구성 가능하다.

각각의 쓰임새를 바로 알자.

CSS Grid는 행과 열을 모두 사용하는 2차원 방식을 사용하여 보다 복잡한 레이아웃 디자인을 구축하는 데 실제로 도움이 되지만 보다 이상적인 것은 두 가지를 함께 사용하는 것을 목표로 해야 한다. 동시에 다른 목적을 위해 사용해야 한다. 레이아웃에는 CSS Grid를 사용하고 요소 정렬에는 Flexbox를 사용하자.

✔️ Flexbox를 사용하면 좋은 경우

• 구현해야할 디자인 규모가 작을 경우 : Flexbox는 몇 개의 행 또는 몇 개의 열로 구현할 작은 레이아웃 디자인이 있을 때 이상적입니다.
• 요소(item)를 정렬해야할 경우
• 전체적인 시안이 없어 컨텐츠를 우선적으로 배치해야할 경우 : . 콘텐츠가 어떻게 보일지 정확히 모르는 경우 Flexbox는 웹 페이지를 만드는 데 이상적인 레이아웃 시스템을 갖고 있다.

✔️ Grid를 사용하면 좋은 경우

• 구현해야 할 복잡한 디자인이 있는 경우
  Grid는 2차원 레이아웃 시스템이 있어 복잡한 디자인을 만드는 데 적합합니다. 더 복잡하고 유지 관리 가능한 웹 페이지를 만드는 데 유리하게 사용할 수 있습니다.
• 블록 요소 사이에 간격을 자주 배정해주어야 하는 경우
  Flexbox에는 없는 CSS Grid에서 매우 유용한 또 다른 기능은 간격 속성입니다. 특히 일부 부작용이 발생할 수 있는 Padding 속성을 사용하지 않고도 행 또는 열 사이의 간격을 매우 쉽게 정의할 수 있습니다.
• 레이아웃 우선 디자인이 필요한 경우
  이미 레이아웃 디자인 구조가 있는 경우 CSS 그리드로 구축하기가 더 쉽고, 2차원 레이아웃 시스템은 행과 열을 함께 사용할 수 있고 위치를 지정할 때 많은 도움이 됩니다.

-출처 : https://blog.logrocket.com/css-flexbox-vs-css-grid/#when-use-css-flexbox