CssHow-ToBeginner · 4 min read

How to Use auto-fill in CSS Grid for Responsive Layouts

Use auto-fill in the grid-template-columns or grid-template-rows property to automatically create as many tracks (columns or rows) as will fit in the container. It repeats the specified size until no more tracks fit, making your grid responsive and flexible.

📐

Syntax

The auto-fill keyword is used inside the repeat() function in CSS Grid. It tells the browser to create as many columns or rows as possible based on the available space.

repeat(auto-fill, minmax(min, max)): Repeats columns or rows to fill the container.
minmax(min, max): Defines the minimum and maximum size for each column or row.

css

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

💻

Example

This example creates a grid that automatically fills the container with columns that are at least 150px wide and grow to fill available space equally. When the container resizes, the number of columns changes automatically.

html

html, body {
  margin: 0;
  height: 100%;
}
.container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 10px;
  padding: 10px;
  background-color: #f0f0f0;
}
.item {
  background-color: #4CAF50;
  color: white;
  padding: 20px;
  font-size: 1.2rem;
  text-align: center;
  border-radius: 5px;
}

<body>
  <div class="container">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
    <div class="item">5</div>
    <div class="item">6</div>
  </div>
</body>

Output

A grid with green boxes labeled 1 to 6 arranged in columns that automatically adjust to fill the container width, with each column at least 150px wide and spacing between them.

⚠️

Common Pitfalls

One common mistake is confusing auto-fill with auto-fit. auto-fill keeps empty tracks if there is extra space, while auto-fit collapses empty tracks. Also, not using minmax() properly can cause columns to be too small or overflow.

Another pitfall is forgetting to set a gap or padding, which can make the grid items look cramped.

css

/* Wrong: fixed column size without minmax */
.container {
  display: grid;
  grid-template-columns: repeat(auto-fill, 150px);
  gap: 10px;
}

/* Right: use minmax for flexibility */
.container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 10px;
}

📊

Quick Reference

auto-fill: Creates as many tracks as fit, leaving empty tracks visible.
auto-fit: Similar to auto-fill but collapses empty tracks.
minmax(min, max): Sets flexible size limits for tracks.
Use with repeat(): To repeat tracks automatically.
Set gap: Adds space between grid items for better look.

✅

Key Takeaways

Use auto-fill inside repeat() to create as many grid tracks as fit the container.

Combine auto-fill with minmax() to make flexible, responsive columns or rows.

Remember auto-fill keeps empty tracks, unlike auto-fit which collapses them.

Always add gap for spacing between grid items to improve readability.

Test resizing your container to see how the grid adapts automatically.