Auto-Fit / Auto-Fill Grid

Truly fluid responsive grids with CSS Grid's auto-fit and auto-fill

Back to Layout Examples

What is Auto-Fit / Auto-Fill?

Auto-fit and auto-fill are powerful CSS Grid features that automatically create as many columns as will fit in the container, each with a minimum and maximum size. This creates truly responsive layouts that adapt to any screen size without media queries.

Auto-Fit (Recommended)

Collapses empty tracks: If you have fewer items than columns can fit, auto-fit will collapse the empty tracks and expand the filled ones.

data-auto-fit="250px"

Equivalent to: repeat(auto-fit, minmax(250px, 1fr))

Auto-Fill

Keeps empty tracks: Creates as many columns as will fit, even if empty. Useful when you want consistent grid structure regardless of item count.

data-auto-fill="250px"

Equivalent to: repeat(auto-fill, minmax(250px, 1fr))

Example 1: Auto-Fit with 250px Minimum

The most common use case. Columns will be at least 250px wide and expand to fill available space. Resize your browser to see the grid adapt automatically.

Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
HTML • Auto-Fit 250px
<div class="slot-layout" data-auto-fit="250px">
    <div class="slot-item">Item 1</div>
    <div class="slot-item">Item 2</div>
    <div class="slot-item">Item 3</div>
    <!-- Automatically creates columns that are at least 250px -->
</div>

Example 2: Auto-Fit vs Auto-Fill

With 3 items in a wide container, notice how auto-fit expands items to fill the space, while auto-fill maintains the column structure.

Auto-Fit (Expands)

Item 1
Item 2
Item 3

Auto-Fill (Consistent)

Item 1
Item 2
Item 3

Example 3: Different Minimum Sizes

RSL provides common presets: 150px, 200px, 250px, 300px, 350px, 400px

150px Minimum (More Columns)

150px
150px
150px
150px
150px

300px Minimum (Fewer Columns)

300px
300px
300px
300px

Example 4: Custom Values via CSS Variables

For sizes not in the presets, use CSS variables:

280px min
280px min
280px min
280px min
HTML • Custom Min/Max
<div class="slot-layout" style="--min-col-width: 280px; --max-col-width: 1fr">
    <div class="slot-item">Item 1</div>
    <div class="slot-item">Item 2</div>
</div>

<!-- Or in CSS -->
<style>
.my-grid {
    --min-col-width: 280px;
    --max-col-width: 500px;  /* Max width instead of 1fr */
}
</style>

Example 5: Combining with Gap Control

Auto-fit/auto-fill works great with RSL's gap control attributes:

Spacious Gap
Spacious Gap
Spacious Gap
Spacious Gap
Spacious Gap
HTML • With Gap Control
<div class="slot-layout" data-auto-fit="200px" data-gap="spacious">
    <!-- Combines auto-fit with 2rem gap -->
</div>

Available Presets

Auto-Fit Sizes

  • data-auto-fit="150px" - Minimum 150px columns
  • data-auto-fit="200px" - Minimum 200px columns
  • data-auto-fit="250px" - Minimum 250px columns (recommended)
  • data-auto-fit="300px" - Minimum 300px columns
  • data-auto-fit="350px" - Minimum 350px columns
  • data-auto-fit="400px" - Minimum 400px columns

Auto-Fill Sizes

  • data-auto-fill="150px" through data-auto-fill="400px"
  • Same sizes as auto-fit, but keeps empty track structure
Note: Auto-fit/auto-fill is CSS-only and requires no JavaScript! It works purely with CSS Grid's native capabilities.

Why Use Auto-Fit / Auto-Fill?

Advantages

  • No Media Queries Needed: Grid adapts automatically to any container size
  • Truly Fluid: Works on any screen size, even ones you haven't tested
  • Content-First: Layout based on content needs (min-width) not viewport
  • CSS-Only: No JavaScript required for responsive behavior
  • Future-Proof: Adapts to new devices without code changes

When to Use

  • Card grids where cards should maintain minimum width
  • Product galleries or image grids
  • Dashboard widgets that need to reflow
  • Any grid where column count depends on available space

When to Use Fixed Columns Instead

  • Specific column counts needed at breakpoints (1/2/3/4)
  • Precise control over layout at each screen size
  • Complex spanning patterns that need fixed column structure