[CSS] display: grid 정리

display: flex와 display: grid는 레이아웃을 다루는데 있어 강력한 도구들입니다. 여러 가지 레이아웃 요구사항에 유연하게 대응할 수 있으며, 두 속성은 각각의 특성에 따라 사용되기도 합니다.

간략하게 정리해보면, flex는 주로 한 방향(주로 수평 또는 수직)으로 아이템을 정렬할 때 사용되며, grid는 그리드(격자)를 사용하여 아이템을 배치할 때 사용됩니다. grid는 2차원 레이아웃을 다룰 수 있어서 보다 복잡한 구조를 만들 수 있습니다.

grid의 몇 가지 중요한 속성들을 더 자세히 살펴보면:

1. grid-template-columns와 grid-template-rows:
   • 그리드의 열과 행을 정의합니다.
   • fr 단위를 사용하여 공간을 분할하거나, px 등의 고정값을 사용할 수 있습니다.
   • repeat 함수를 사용하여 반복 패턴을 편리하게 작성할 수 있습니다.
   • ex) grid-template-columns: repeat(3, 1fr): 1/3로 열값이 일정하게 나뉩니다.
2. auto-fill과 auto-fit:
   • 그리드의 갯수를 자동으로 설정합니다.
   • auto-fill은 가능한 한 많은 그리드를 생성하되, 남은 공간이 있다면 그대로 둡니다.
   • auto-fit은 남은 공간을 채우기 위해 그리드의 크기를 자동으로 조정합니다.
3. gap:
   • 그리드 아이템 사이의 간격을 설정합니다.
   • row-gap과 column-gap을 사용하여 수평 및 수직 간격을 따로 설정할 수 있습니다.
4. minmax:
   • 그리드 아이템의 최소 및 최대 크기를 설정합니다.
   • minmax(min, max) 형태로 사용되며, 남은 공간을 채우기 위해 아이템의 크기가 조정됩니다.
   • ex) grid-template-columns: repeat(3, minmax(150px, auto)): 최솟값 150px, 최댓값은 남은 공간의 전부를 차지하게 3개의 열로 나눕니다.

그리드는 반응형 디자인을 쉽게 구현할 수 있게 해주며, 다양한 화면 크기와 레이아웃에 적응할 수 있도록 도와줍니다.