Q27: What is the difference between auto-fill and auto-fit in CSS Grid repeat()?
Both auto-generate column tracks. When extra grid space exists:
auto-fill: Retains empty invisible column tracks, keeping grid item sizes fixed.auto-fit: Collapses empty tracks to 0px, stretching existing grid items across the full container width.
Responsive Auto-Fit Grid
.responsive-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 1rem;
}💡 auto-fit automatically recalculates grid columns to fill row space without requiring media queries.
Key Takeaways
auto-fillpreserves empty grid column tracks.auto-fitcollapses empty space and expands existing grid items to fill full container width.
Knowledge Check
Which keyword collapses empty grid column tracks and stretches active items across container widths?