CSS 그리드 레이아웃 질문드립니다.

Question

최근 Next.js로 프로젝트를 진행하며 여러 페이지를 벤치마킹하다가 궁금한 내용이생겨서 질문드립니다.

CSS의 grid속성의경우 2차원속성으로 가로세로 전체 레이아웃을 지정하거나 특정 컴포넌트 내부에서 레이아웃을 잡는데 사용한다고 배웠습니다.

몇몇 페이지의 경우 부트스트랩을 사용한것같은데 n개의 컬럼으로 나눈뒤 내부에 하나의 요소 또는 메인과 사이드네비게이션을 배치하는경우가 있는데 방법론이 있는건지 어떤 의도가있는건지 궁금합니다.

그리드를 처음 공부할때 전체적인 레이아웃을 잡거나 인스타그램같은 n x n의 이미지 배치할때 사용하고 이외 플렉스위주로 사용했는데 성능적으로 이점이 있는건지 .. 세로스크롤 때문인지 궁금합니다.

이재찬 · Accepted Answer

Grid는 2차원(행, 열)로 레이아웃을 관리하기 때문에 flexbox에 비해 훨씬 정교하고 강하게 관리할 수 있습니다.
그리고 2차원으로 관리를 하기 때문에 아이템(컨테이너)들의 위치 제어에 있어서도 훨씬 편리하게 이용이 가능합니다.
그리고 내부의 순서를 변경하여 반응형 레이아웃에서 더욱 정교한 관리가 가능해지고, flex에서는 어려움이 있던 중간중간 혹은 상하좌우 사이드에 빈 부분들에 대한 교정이 쉬워집니다.
그리고 flex를 반복하는 것보다 코드적인 가독성에서 훨씬 보기가 좋지요.

특히 이런 grid는 최근에 나온 container-query에서 더더욱 큰 힘을 발휘할 수 있을 거라고 저는 생각하고 있습니다.
flex랑 grid를 나눠서 생각하지 마시고, 필요한 경우에 적절한 속성을 이용하여 레이아웃을 관리할 수 있으면 좋을 것이라고 생각합니다.

그리고 다른 질문인, n개의 컬럼으로 화면을 나누어 관리하는 부분에 대해서는, 나름의 규칙성을 가지고 적절한 위치 배분을 위한 부분도 존재합니다만, 반응형을 위해 그렇게 작업하는 부분이 크게 차지할 것 같습니다.

화면의 크기에 따라 n의 개수를 조절하여 레이아웃 내부의 아이템의 배치를 컨트롤 하기 쉽게 하기 위해서 컬럼을 나누어 관리하는 것입니다.

이에 대해 잘 설명된 포스트가 있어 공유드립니다.
https://medium.com/user-experience-design-1/responsive-grids-and-how-to-actually-use-them-970de4c16e01