1. auto-fill (빈 열 유지)

2. auto-fit (빈 열 축소)

3. repeat(4, 1fr) (고정 4열)

브라우저 창 크기를 조절해보세요!

화면이 넓어지거나 좁아질 때 auto-fill과 auto-fit의 차이를 관찰하세요.

브라우저 지원 현황:

• ✅ Chrome 57+ (2017.03)
• ✅ Firefox 52+ (2017.03)
• ✅ Safari 10.1+ (2017.03)
• ✅ Edge 16+ (2017.10)
• ✅ Opera 44+ (2017.03)
• ✅ iOS Safari 10.3+
• ✅ Android Browser 67+
• ✅ Chrome for Android 97+

실무에서의 사용 예시:

/* 카드 레이아웃 */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
  padding: 20px;
}

/* 갤러리 레이아웃 */
.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 15px;
}

/* 반응형 사이드바 */
.layout {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 30px;
}

/* 태그 클라우드 */
.tag-cloud {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 10px;
}

참고 사항:

1. minmax(150px, 1fr)에서:
   • 150px: 최소 너비 (이보다 작아지지 않음)
   • 1fr: 최대 너비 (사용 가능한 공간을 균등 분배)
2. auto-fill과 auto-fit의 차이는 빈 열 처리 방식
3. IE11에서는 지원되지 않음 (폴리필 필요)
4. 모바일에서는 minmax() 값을 작게 설정하는 것이 좋음