프론트엔드 레이아웃 구성에 있어 가장 많이 사용되는 속성은 flex와 grid다.
예전에는 table 혹은 float를 사용해 레이아웃 구성을 많이 하기도 했지만 table의 경우 레이아웃 구성을 위한 속성은 아니기 때문에 거의 사용하지 않는 추세이고 이에 반해 float는 간단한 정렬을 위해 아직까지도 많이 사용이 된다.
float의 경우 요소의 흐름을 제어하는 속성이기 때문에 사실상 우리가 흔히 알고 있는 메뉴의 레이아웃, 콘텐츠의 레이아웃을 등을 구성하기에는 그리 적합하지는 않을 수 있다.
때문에, 콘텐츠 혹은 화면의 레이아웃 구성을 위한 속성인 flex와 grid를 통해 레이아웃을 작성하는 것이 대부분이다.
하지만 flex와 grid를 각각 언제 어떻게 사용해야 할지 그 기준이 모호할 때가 있다.
이는 이 둘의 차이점을 제대로 이해하지 못하고 있기 때문인데, 이번 글에서는 이 둘의 차이점을 간단히 살펴보면서 언제, 어떤 상황에서 flex, grid를 사용해야 하는지를 함께 알아보고자 한다.
👉🏻 flex에 대해 알아보기 - flex MDN
👉🏻 grid에 대해 알아보기 - gird MDN
1️⃣ Flex와 Grid의 차이점
flex와 grid의 가장 큰 차이점은 방향이다.
flex는 1차원적인 1방향 레이아웃 시스템grid는 2차원적인 2방향 레이아웃 시스템
즉, flex는 가로면 가로, 세로면 세로 단 1방향으로만 레이아웃 구성이 가능한 시스템이라고 생각하면 된다.
grid는 flex에서 한 차원 더 발전된 시스템으로 1방향으로만 가능했던 flex와는 달리 가로, 세로 모두 한꺼번에 레이아웃을 구성할 수 있는 2차원적인 레이아웃 시스템이라고 생각하면 된다.
✅ 이미지 출처
https://studiomeal.com/archives/533
위 이미지를 통해서 그 차이점을 더 명확히 살펴볼 수 있다.
flex는 단 1방향으로만 흘러가는 반면 grid는 가로, 세로 2방향이 함께 흘러간다.
따라서, flex는 grid보다 좀 더 단순한 레이아웃을, grid는 flex보다 더 복잡하고 정교한 레이아웃을 구성할 수 있다고 생각하면 될 것 같다.
2️⃣ 언제 Flex를, 언제 Grid를 사용할까?
위에서 flex와 grid의 차이점을 살펴봤다면, 언제 flex를 사용하고 언제 grid를 사용할지 각각의 속성 적용 상황에 대해 대략적인 감을 잡을 수 있을 것 같다.
결론부터 말하면, 1차원 정렬이라면 flex를, 2차원 정렬이라면 Grid를 사용하는 것이 좋다. 더불어 콘텐츠 정렬을 위한 것이라면 flex를, 전체적인 레이아웃 정렬을 위한 것이라면 grid를 사용하는 것이 좋다.
✅ 이미지 출처
https://studiomeal.com/archives/197
위의 이미지에 나와있는 것처럼 웹 페이지 안의 각각의 콘텐츠 정렬을 위해서는 flex를 사용하는 것이 좋다.
예를 들어 상단에 있는 메뉴바, 카테고리 메뉴의 텍스트와 이미지, 카드의 이미지와 상품 설명 등...
한 방향으로 이루어져 있으며 콘텐츠 안의 요소들의 정렬을 위한 것이라면 grid보다 flex를 사용하는 것이 더 적합하다.
✅ 출처
https://studiomeal.com/archives/533
grid는 위의 이미지에 나와있는 것처럼 웹 사이트의 전체적인 레이아웃 혹은 하나의 대표적인 콘텐츠의 큰 틀을 구성할 때 사용하는 것이 좋다.
grid는 2차원 레이아웃 시스템이기 때문에 flex보다 더 큰 틀을 구성하기에 적합하고 무엇보다 처음 웹 사이트의 레이아웃을 잡을 때 아주 유용하게 사용할 수 있다.
사실 flex를 통해서도 위의 레이아웃을 구성할 수는 있지만, 앞서 살펴봤듯이 flex는 단방향 레이아웃 시스템이기 때문에 각각의 섹션을 따로 나누어 정렬을 해줘야 한다.
섹션을 나눠서 웹 사이트의 큰 틀을 구성하는 것도 굉장히 좋은 방법이고 실제로 많이 사용되는 방법이지만 grid처럼 큰 그림(전체적인 그림)을 파악하기가 쉽지 않기 때문에 최근에는 grid를 통해서 레이아웃 구성을 많이 한다.
앞서 flex와 grid의 차이점을 살펴보면서 언제 어떤 상황에서 flex, grid를 사용하면 좋을지 함께 알아봤다.
각각의 속성의 역할이 분명한 건 사실이지만, css의 경우 작성하는 사람마다 스타일이 모두 다르고 또 정답도 없기 때문에 본인의 스타일대로, 나름의 규칙대로 속성들을 적합하게 사용해서 스타일을 적용하는 것이 좋지 않을까 생각한다.
✅ 참고 사이트
https://developer.mozilla.org/ko/docs/Web/CSS/flex
https://developer.mozilla.org/ko/docs/Web/CSS/grid
