Responsive Grid: Repeat, Minmax, Auto-Fit, and Auto-Fill

Master responsive CSS Grid layouts. Learn how to build flexible columns that wrap without media queries using repeat, minmax, auto-fit, and auto-fill.

Introduction

Designing responsive layouts historically required writing multiple media queries. You would define a single-column layout for mobile screens, add a breakpoint at 768px for tablet columns, and add another breakpoint at 1200px for desktop grids.

CSS Grid provides a cleaner way. By combining the repeat() utility function, the minmax() sizing function, and auto-placement keywords (auto-fit or auto-fill), you can build responsive column grids that wrap automatically to fit the screen size, all with a single line of CSS.

What You Will Learn

  • How the repeat() utility function simplifies track definitions.
  • Defining sizing ranges using the minmax() function.
  • Creating auto-wrapping columns using the auto-fit keyword.
  • The differences between auto-fit and auto-fill.
  • Building responsive grids without writing media queries.

Prerequisites

Sizing Functions and Keywords

To build responsive grids, we combine a few CSS Grid functions and keywords:

1. The repeat() Function

Simplifies defining grid columns and rows by repeating a pattern instead of writing it out manually:

  • grid-template-columns: repeat(3, 1fr); Equivalent to 1fr 1fr 1fr.
  • grid-template-columns: repeat(2, 100px 1fr); Equivalent to 100px 1fr 100px 1fr.

2. The minmax() Function

Defines a size range with a minimum and maximum limit:

$$\text{minmax(minimum-size, maximum-size)}$$

  • grid-template-columns: minmax(200px, 1fr) 1fr; The first column will never shrink below 200px, but will expand to fill available space.
  • grid-template-columns: repeat(3, minmax(150px, 1fr)); Creates three columns that grow equally but never shrink below 150px.

3. Auto-Placement Keywords (auto-fit and auto-fill)

Instead of hardcoding the number of columns (e.g. repeat(3, ...)), you can instruct the browser to fit as many columns as possible into the container width using auto-placement:

  • auto-fit: Fits as many columns as possible into the container. If there are fewer elements than available columns, the existing columns expand to fill all remaining empty space.
  • auto-fill: Fits as many columns as possible. Even if there are no items to fill them, the empty columns are preserved, leaving blank space at the end of the row.
.responsive-grid {
  display: grid;
  /* Fits as many columns of at least 250px as possible, expanding them equally */
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

Comparison Table: Auto-Fit vs. Auto-Fill

Let's look at how both keywords behave when a container has space for 4 columns, but only contains 2 items:

| Keyword | Column Count | Column Width | Empty Spaces | | :--- | :--- | :--- | :--- | | auto-fit | Collapses to 2 tracks. | Expands to fill the full container width ($50%$ each). | No empty tracks. | | auto-fill | Preserves all 4 tracks. | Stays at their minimum size ($25%$ each). | Renders 2 empty tracks on the right. |

Visual Learning Diagram (Mermaid)

graph TD
    subgraph Sizing Columns without Media Queries
    Formula[repeat auto-fit, minmax 200px, 1fr] --> Screen300[Screen: 300px <br> Fits 1 column of 300px]
    Formula --> Screen500[Screen: 500px <br> Fits 2 columns of 250px]
    Formula --> Screen900[Screen: 900px <br> Fits 4 columns of 225px]
    end

Code Examples

Example 1: Responsive Cards Matrix (Zero Media Queries)

Build a responsive card grid that adapts from mobile screens to wide monitors without writing a single media query:

.product-matrix {
  display: grid;
  
  /* Auto-calculate columns: minimum 280px, maximum stretches to fill space */
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  
  gap: 20px;
  padding: 20px;
}

.product-card {
  background-color: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 16px;
}

Example 2: Flex-Sidebar with Grid Fallback

Build a sidebar layout that wraps automatically on mobile viewports:

.dashboard-layout {
  display: grid;
  
  /* Sidebar (left) min: 250px, Content (right) min: 500px. 
     If viewport is under 750px, they wrap to separate rows. */
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  
  gap: 24px;
}

Best Practices & Common Mistakes

  • Incorrect Minmax Minimums: Do not use 1fr as the first argument in minmax() (e.g. minmax(1fr, 300px)). Sizing fractional units as minimum limits is invalid and will cause the browser to ignore the layout rule. The first argument should be a fixed length (like px, rem, or em) or a keyword like min-content.
  • Content Spillover: Ensure your minimum width in minmax() is not wider than the smallest target mobile viewport (usually 320px). If you declare minmax(350px, 1fr), the column will overflow and cause horizontal scrollbars on a 320px screen.

FAQs

Q: Why are my elements stretching vertically in the grid? A: By default, grid containers set align-items: stretch. To prevent grid items from stretching to match the tallest item in the row, set align-items: start; or align-items: center;.

Q: Can I use repeat(auto-fit, 1fr)? A: No. Sizing auto-fit alongside a simple 1fr unit without a minimum limit is invalid. The browser needs a fixed minimum size (via minmax) to calculate how many columns can fit into the container width.

Summary

Responsive CSS Grid layouts wrap columns automatically. By combining the repeat() helper, the minmax() sizing function, and auto-placement keywords like auto-fit (which expands items to fill space) or auto-fill (which preserves empty columns), you can build responsive grids without writing media queries.

Related Articles

Next Tutorial

Now that we have covered layout engines, how do we build layouts that adapt to various devices? Let's check: Responsive Design & Breakpoints.

← Back to Syllabus