Auto-Fit vs Auto-Fill
Responsive grid layouts often need to adapt to available space without explicit media queries. CSS Grid provides two keywords that work with repeat() to create flexible, automatically sizing columns: auto-fit and auto-fill. These keywords sound similar and are often confused, but they produce fundamentally different results that affect how your layout responds to available space.
Both keywords tell the browser to create as many tracks as will fit in the container. The critical difference emerges when there are fewer items than the maximum number of tracks: auto-fill preserves empty tracks, while auto-fit collapses them. This distinction might seem trivial, but it profoundly impacts how remaining items distribute across available space.
Understanding Auto-Fill
The auto-fill keyword creates as many tracks as possible given the container width and track constraints, regardless of whether content fills those tracks. Empty tracks remain in the layout, taking up space even when no items occupy them. This behavior maintains a consistent grid structure where items always occupy their defined width.
.grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: 1rem;
}
This declaration creates columns that are at least 200 pixels wide, expanding to fill available space via the 1fr maximum. The browser calculates how many 200-pixel columns fit in the container and creates that many tracks. If you have three items but space for five columns, auto-fill creates five columns, leaving two empty. The three items each occupy one column at their minimum 200-pixel width, and the empty columns exist but remain vacant.
This behavior proves useful when you want items to maintain consistent sizing regardless of how many exist. Cards in a product grid, for instance, might need to stay at a specific width rather than stretching to fill available space.
Understanding Auto-Fit
The auto-fit keyword also creates as many tracks as possible, but it collapses empty tracks to zero width. When fewer items exist than the maximum number of columns, auto-fit eliminates the empty tracks, allowing remaining items to expand and fill available space according to their maximum size constraint.
.grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 1rem;
}
Using the same three-item, five-column scenario, auto-fit creates five columns initially but then collapses the two empty ones. The three items expand beyond their 200-pixel minimum, stretching according to the 1fr maximum to fill the entire container width. Each item grows proportionally to occupy available space.
This behavior suits layouts where you want items to take advantage of available space. A dashboard with widget cards, for example, benefits from auto-fit because widgets can expand when fewer exist, making better use of screen real estate.
The Critical Difference
The distinction becomes apparent when you have fewer items than the container can accommodate at minimum width. With auto-fill, items maintain their minimum size and empty space remains as vacant tracks. With auto-fit, items expand beyond their minimum to fill the container.
Consider a container 1200 pixels wide with items having minmax(200px, 1fr) sizing. The container accommodates six 200-pixel columns. With four items, auto-fill creates six columns, places one item in each of the first four, and leaves two empty columns. Each item stays at 200 pixels wide. With auto-fit, the grid creates six columns, places items in the first four, collapses the empty two, and expands the four items to 300 pixels each to fill the 1200-pixel width.
Interactive Comparison Demo
Experiment with both keywords by adjusting the number of items and observing how each approach distributes space. The visual difference clarifies when to use each keyword.
Choosing Between Auto-Fit and Auto-Fill
The choice between auto-fit and auto-fill depends on desired behavior when content does not fill available space. Neither is universally better; each serves specific layout goals.
Use Auto-Fill When
Choose auto-fill when items should maintain consistent sizing regardless of quantity. Product catalogs, image galleries, and card grids often benefit from auto-fill because items staying at predictable widths creates visual consistency. Users expect gallery thumbnails to remain the same size whether viewing six images or sixty.
Use Auto-Fit When
Choose auto-fit when items should expand to use available space. Dashboard widgets, feature sections, and promotional cards often benefit from auto-fit because maximizing screen real estate improves information density and visual impact. A two-widget dashboard looks better with widgets spanning the full width rather than clustering on one side.
The Minimum Width Consideration
Both keywords work with minmax() to establish minimum and maximum track sizes. The minimum determines when wrapping occurs; the maximum controls expansion behavior. Setting appropriate minimums ensures content remains readable across devices.
/* Desktop approach */
.grid {
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}
/* Fully responsive approach */
.grid {
grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr));
}
The second example uses min(150px, 100%) to ensure columns never exceed container width on very small screens. This prevents horizontal overflow while maintaining reasonable column widths on larger screens.
Common Patterns and Use Cases
Real-world layouts combine auto-fit and auto-fill with other Grid features to create sophisticated responsive designs.
Responsive Card Grid
/* Cards that maintain width */
.card-grid-fill {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: var(--spacing-med);
}
/* Cards that expand to fill space */
.card-grid-fit {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: var(--spacing-med);
}
E-commerce product grids typically use auto-fill because products should appear at consistent sizes for comparison. Marketing landing pages often use auto-fit because feature cards can expand to create visual impact.
Image Gallery
.gallery {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: var(--spacing-sm);
}
.gallery img {
width: 100%;
height: 200px;
object-fit: cover;
border-radius: var(--radius-sm);
}
Fixed-height images with object-fit: cover ensure consistent presentation regardless of original dimensions. The auto-fill keyword maintains regular spacing between images.
Dashboard Layout
.dashboard {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: var(--spacing-lg);
}
.widget {
background: var(--color-surface);
padding: var(--spacing-med);
border-radius: var(--radius-med);
min-height: 200px;
}
With three widgets on a wide screen, each expands to roughly one-third of the width. When one widget is removed, the remaining two expand to half-width each, maintaining balanced visual weight.
Advanced Techniques
The grid-auto-flow: dense property works with auto-fit to fill gaps when items span multiple tracks. This creates efficient layouts where smaller items fill spaces left by larger ones.
.dense-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
grid-auto-flow: dense;
gap: var(--spacing-sm);
}
.item-wide {
grid-column: span 2;
}
.item-tall {
grid-row: span 2;
}
Interactive Dense Packing Demo
Toggle dense packing and add items of varying sizes. Notice how dense fills gaps by moving smaller items into spaces created by larger ones.
Common Mistakes and Solutions
Forgetting the 1fr Maximum
Using minmax(200px, 200px) prevents tracks from expanding. Items stay at minimum width even when space exists for growth.
/* Wrong: items never expand */
.grid-wrong {
grid-template-columns: repeat(auto-fit, minmax(200px, 200px));
}
/* Correct: items can expand */
.grid-correct {
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
Minimum Width Too Large for Mobile
Setting a 300-pixel minimum breaks layouts on mobile devices with 320 to 375 pixel widths. The grid forces horizontal scrolling because tracks cannot fit within the container.
/* Wrong: breaks on mobile */
.grid-mobile-broken {
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}
/* Better: responsive minimum */
.grid-mobile-friendly {
grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
}
Practical Implementation Strategy
When building responsive layouts, start with auto-fit as the default choice. It provides better space utilization and adapts gracefully to varying content quantities. Switch to auto-fill only when you specifically need items to maintain consistent width regardless of quantity.
Test layouts with different item counts during development. View the layout with 1 item, 3 items, 7 items, and 20 items to observe how it responds. This testing reveals whether auto-fit or auto-fill better serves your design goals.
Building on This Foundation
Understanding auto-fit and auto-fill provides the foundation for sophisticated responsive grid layouts. These keywords eliminate the need for breakpoint-heavy CSS while creating layouts that adapt intelligently to both viewport size and content quantity. The upcoming assignments will combine these techniques with named areas, subgrid, and advanced positioning to build professional-grade responsive designs.