repeat, minmax, auto-fill, auto-fit 완전정복 – 똑똑한 Grid를 만드는 고급 기술들

 

 

CSS Grid는 단순히 열을 나열하는 것뿐 아니라
상황에 따라 자동으로 조정되는 반응형 레이아웃을 만들 수 있는
고급 함수들도 제공합니다.

이번 포스팅에서는 가장 많이 쓰이는 4가지 키워드를 정리해볼게요:

• repeat()
• minmax()
• auto-fill
• auto-fit

---

 

✅ 1. repeat()

grid-template-columns: repeat(3, 1fr);

 

→ 1fr 1fr 1fr을 간단하게 줄인 형태예요.
반복되는 패턴을 간단하게 작성할 수 있어요.

---

 

✅ 2. minmax()

grid-template-columns: repeat(3, minmax(200px, 1fr));

 

→ 각 열의 최소 너비는 200px, 최대는 남은 공간만큼
→ 창 크기에 따라 유연하게 반응하는 열을 만들 수 있어요!

---

 

✅ 3. auto-fill

grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));

 

• 가능한 만큼 열을 자동으로 채움
• 창 크기에 따라 열 개수가 자동 조절됨
• 빈 칸이 생겨도 열 개수 유지

💡 실무에서 카드형 UI, 갤러리 레이아웃에 자주 씀!

---

 

✅ 4. auto-fit

grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));

 

• auto-fill과 비슷하지만…
• 빈 칸이 생기면 알아서 접어줌 (열의 너비가 꽉 채워짐)

💡 auto-fit은 빈 셀을 없애고 유동적으로 정렬하고 싶을 때 사용

---

 

🔁 비교 요약

속성	설명
repeat(n, x)	같은 패턴을 n번 반복
minmax(a, b)	최소 a, 최대 b 범위 지정
auto-fill	가능한 열을 자동 채움 (빈 칸 유지)
auto-fit	가능한 열을 자동 채움 (빈 칸 제거하고 꽉 채움)

 

---

 

🧪 실습 예제

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
}

 

이 코드 하나만으로도
화면 크기에 따라 카드 개수가 자동 조절되는 반응형 레이아웃이 완성됩니다.