CssHow-ToBeginner · 4 min read

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

Use auto-fit in the grid-template-columns property to automatically create as many columns as fit in the container. It works with minmax() to set a minimum and maximum size for columns, letting the grid adjust column count based on available space.

📐

Syntax

The auto-fit keyword is used inside the grid-template-columns or grid-template-rows property with the repeat() function. It tells the grid to create as many columns (or rows) as possible that fit the container size.

repeat(auto-fit, minmax(min, max)): Creates columns that are at least min wide and at most max wide.
auto-fit: Grows or shrinks the number of columns to fill the container.
minmax(): Sets the minimum and maximum size of each column.

css

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

💻

Example

This example shows a grid container with boxes that automatically adjust the number of columns based on the container width. Each column is at least 150px wide and can grow to fill available space equally.

html

<style>
html, body {
  margin: 0;
  padding: 0;
  font-family: Arial, sans-serif;
}
.container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
  padding: 10px;
  background-color: #f0f0f0;
}
.box {
  background-color: #4a90e2;
  color: white;
  padding: 20px;
  text-align: center;
  border-radius: 5px;
  font-weight: bold;
}
</style>
<body>
  <div class="container">
    <div class="box">Box 1</div>
    <div class="box">Box 2</div>
    <div class="box">Box 3</div>
    <div class="box">Box 4</div>
    <div class="box">Box 5</div>
    <div class="box">Box 6</div>
  </div>
</body>

Output

A grid with blue boxes arranged in columns that automatically adjust from 1 column on narrow screens up to 4 or more columns on wide screens, each box at least 150px wide and evenly spaced.

⚠️

Common Pitfalls

Common mistakes when using auto-fit include:

Not using minmax() with auto-fit, which can cause columns to collapse or not resize properly.
Confusing auto-fit with auto-fill. auto-fit collapses empty tracks, while auto-fill keeps them.
Setting fixed widths without flexibility, which breaks responsiveness.

css

/* Wrong: fixed width without minmax */
.container {
  display: grid;
  grid-template-columns: repeat(auto-fit, 150px); /* columns won't shrink or grow */
  gap: 10px;
}

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

📊

Quick Reference

Tips for using auto-fit in CSS Grid:

Use with repeat() and minmax() for responsive columns.
auto-fit collapses empty columns, making the grid adapt to content.
Use 1fr as max size to distribute space evenly.
Combine with gap for spacing between grid items.

✅

Key Takeaways

Use auto-fit with repeat() and minmax() to create flexible grid columns.

auto-fit automatically adjusts the number of columns to fit the container width.

Always set a minimum and maximum size with minmax() for responsive behavior.

Avoid fixed widths without flexibility to keep your grid responsive.

Remember auto-fit collapses empty columns, unlike auto-fill.