flex와 grid는 프론트엔드 레이아웃을 구성하기 위해 사용되는 속성이다. 이 속성들이 등장하기 전까지는 CSS에 레이아웃을 구성하기 위한 속성이 특별히 존재하지 않았고, 주로 table과 float를 적절히 이용하여 레이아웃을 구성하였다. 웹개발 기술이 발전함에 따라 SEO를 위한 시멘틱 태그의 중요성이 대두되면서 table과 같은 태그들은 단순히 레이아웃을 구성하기 위한 요소로만 사용하기에 적절하지 않았고 그나마 float 속성이 살아남아 사용성에 의해 현재까지도 필요에 따라 사용되며 naver와 같은 사이트의 레이아웃 구성에도 사용되고 있다. float 속성은 본래 레이아웃을 위해 설계된 것이 아니고 이미지를 텍스트 주위에 배치하기 위해 고안된 방식으로 주로 어떤 요소를 좌우로 떠 있게 하는 데 사용하는 속성이다. 따라서 이를 사용해 복잡한 레이아웃을 구현하기에는 제약이 많았고, 오늘날 많은 개발자들은 flex와 grid를 사용해 레이아웃을 구성하고 있다.
사진 예시) 둥둥 떠있는 float 속성과 동등한 높이로 꽉 채워 늘리며 비교적 유연하게 사용이 가능한 flex 속성그렇다면 콘텐츠 혹은 화면의 레이아웃 구성을 위한 속성인 flex와 grid는 무엇이며, 각각 언제 어떻게 사용해야 할까? 각 속성에 대한 이해를 기반으로 해서 그 기준을 명확히 정해야할 것이다. 이번 글에서는 이 둘을 비교해서 살펴보고, 언제, 어떤 상황에서 flex 혹은 grid를 사용해야 하는지를 정리해보고자 한다.
✔️ Flex와 Grid의 차이점
💡 Flex는 1차원, Grid는 2차원
flex와 grid의 가장 큰 차이점은 레이아웃을 구성하는 방식이다.
Flex는 한 방향 레이아웃 시스템 (1차원)
Grid는 두 방향(가로-세로) 레이아웃 시스템 (2차원)
위의 그림과 같이 Flex는 한 방향(가로/세로)에서 요소들을 유연하게 배치하고 정렬할 수 있고 Grid는 행과 열의 두 방향 모두에서 비교적 복잡한 레이아웃을 쉽게 설계할 수 있다.
✔️ 언제 Flex를, 언제 Grid를 사용할까?
💡 Contents 정렬에는 Flex, 복잡한 Layout 구성에는 Grid
Flex와 Grid 시스템이 어떻게 레이아웃을 구성하는지 그 차이점을 알았으니, 언제 Flex를, 언제 Grid를 사용할지 알아보자.
Flex는 한 방향(가로 또는 세로)에서 요소들을 효율적으로 정렬하고 배치하는 방식이다. 따라서, 행과 열을 모두 구성해줘야 하는 grid에 비해 비교적 쉽고 간단하게 요소들을 정렬할 수 있다는 점에서 어떤 Contents들을 정렬을 하는데 유용하다.
flex-direction를 통해 row,column 중 하나의 축을 정해, justify-content, align-items 등의 속성으로 요소 간 정렬을 쉽게 조정 가능하다.
naver 메인에서 확인할 수 있는 flex 요소들이처럼 flex는 웹페이지를 구성하는 여러가지의 요소 중 하나의 콘텐츠, 예를 들어 상단에 있는 메뉴바, 카테고리 메뉴의 텍스트와 이미지, 카드의 이미지와 상품 설명 등을 정렬하는데 아주 효과적이다.
Grid는 행과 열이 있는 2차원 레이아웃 시스템이기 때문에, 비교적 복잡한 페이지 레이아웃을 디자인할 때 유용하고 전체적인 큰 틀을 그릴 때 많이 쓰인다.
위의 그림을 통해 알 수 있듯이 grid-template-columns, grid-template-rows 등을 통해 화면에 행과 열을 그려 요소를 특정 그리드 셀이나 영역에 고정적으로 배치하거나(그림의 a, main, b), 여러 셀에 걸쳐 배치함으로써(그림의 header & footer, 한 줄의 빈칸) 정교한 레이아웃 배치를 설정할 수 있다.
사실, Flex를 통해서도 위의 레이아웃을 구현할 수는 있다. 하지만 그러기 위해서는 한줄로 정렬해야하는 각 요소들을 하나의 박스로 묶어야하기 때문에 전체적인 레이아웃을 파악하기 어렵고 직관적이지 못하다.
airbnb 홈페이지에서 사용된 grid의 예시예시 이미지를 보면, grid로 표현된 부분들 모두 flex로도 구현이 가능하다. 하지만 아래 2차원 레이아웃 경우에는 각 줄 별로 div로 감싸지 않고, 하나의 grid container를 통해 행과 열을 그려 grid를 사용함으로써 훨씬 간단하게 구현이 가능하다.
👩🏻💻 마치며...
어떤 코드에도 정답은 없듯이 flex와 grid를 사용함에 있어서도 개인의 선호도가 작용할 것이다. 그렇지만 좋은 개발자는 flex와 grid의 차이점을 알고 그것을 토대로 어떤 속성을 사용하는 것이 레이아웃을 더 효율적으로 구성할 수 있을지 판단할 수 있어야 한다고 생각하고 오늘 내용이 도움이 되었으면 좋겠다.
출처
https://studiomeal.com/archives/197
https://studiomeal.com/archives/533
https://velog.io/@sebinn/Flex%EC%99%80-Grid
https://www.airbnb.co.kr/?_set_bev_on_new_domain=1710084544_NGQzYTEwN2IyMDE2
https://www.naver.com/
