[CSS] Grid

❓ Grid란?

gird는 2차원 css 레이아웃용으로 만들어졌습니다. 1차원 배치가 가능한 Flexbox와 달리 행과 열을 동시에 제어할 수 있습니다.

❗️ Grid주요 속성

• display: grid: 요소를 그리드로 지정하여 자식 요소들을 그리드 아이템으로 만들어 줍니다.

• gap: 그리드 아이템 사이에 간격을 띄워줍니다.

• grid-template-column/grid-template-rows: 그리드의 열과 행으로 만들어줍니다. 고정된 크기나 fr과 같은 유연한 단위로 설정이 가능합니다.

• grid-column/grid-row: 그리드 아이템을 그리드 안에서 어느쪽으로 위치할지 지정해줍니다. 아이템이 몇개의 열이나 행을 차지할지 지정해줄 수 있습니다.

• grid-template-area: 그리드 아이템의 class 이름으로 해당 그리드 컨테이너에서 그리드 아이템이 차지하는 구역을 지정해 줍니다. .으로 그리드 아이템 구역을 비워둘 수 있습니다.

✏️ grid-template-area 예시

위와 같은 레이아웃 배치는 아래의 코드로 구현했습니다.

.grid-box {
  min-inline-size: 622px;
  border: 1px solid green;
  padding-inline: 20px;
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(5, minmax(100px, 1fr));
  grid-template-rows: auto;
  grid-template-areas:
    'item1 item1 item1 . item2'
    'item3 item3 item4 item4 .'
    'item5 item5 item5 item5 item5';
  .grid-item {
    padding: 0.5rem;
  }

💡 결론

• grid는 복잡한 레이아웃 배치에 유용합니다.
• 1차원적인 배치나 정렬은 flex가 사용하기 간편합니다.
• gird와 flex 두 가지를 적절하게 조합하여 레이아웃을 구성하는게 좋을 것 같습니다.