[CSS] Grid (2) - auto-fit과 반응형 그리드 실전

이번 포스팅에서는 [최신 레이아웃] 파트의 세부 주제인 미디어 쿼리 없는 반응형 Grid에 대하여 상세히 알아보겠습니다.

1. grid-template-areas를 이용한 직관적인 구조 잡기

마치 테트리스를 하듯, 알파벳이나 단어로 레이아웃의 영역을 시각적으로 그릴 수 있습니다. 코드를 읽는 것만으로도 전체 디자인이 머릿속에 떠오르게 됩니다.

.layout {
  display: grid;
  grid-template-areas:
    "header header header"
    "nav    main   aside"
    "footer footer footer";
}
.header-box { grid-area: header; }
.main-box { grid-area: main; }

2. 👑 실무 끝판왕: 미디어 쿼리 없는 자동 반응형 카드 리스트

repeat(), auto-fit, minmax() 세 가지 조합은 현대 웹 디자인에서 가장 많이 쓰이는 Grid 패턴입니다. 카드의 최소 너비만 보장해주면 브라우저 너비에 따라 열(Column) 개수가 자동으로 변합니다.

.card-container {
  display: grid;
  /* 카드는 최소 250px을 보장하며, 화면이 남으면 1fr로 늘어남.
     남는 공간에 새로운 카드가 들어갈 수 있으면 열을 자동으로 추가함! */
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 16px;
}

---

지금까지 CSS Grid의 시각적 템플릿과 자동 반응형 패턴에 대해 살펴보았습니다. auto-fit과 minmax를 활용해 수많은 미디어 쿼리 코드를 단 한 줄로 줄여보세요.