Auto-Fit & Auto-Fill

The real power of CSS Grid for responsive design lies in the repeat() function combined with auto-fit or auto-fill and minmax(). This lets the browser automatically determine how many columns fit in the available space.

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
}

Breaking this down:

• repeat() — Repeats a track pattern.
• auto-fit — Creates as many columns as will fit, and collapses empty tracks so items stretch to fill the row.
• auto-fill — Creates as many columns as will fit, but preserves empty tracks. Items do not stretch into empty columns.
• minmax(200px, 1fr) — Each column is at least 200px but can grow to take an equal share of leftover space.

The difference between auto-fit and auto-fill only matters when you have fewer items than available columns. With auto-fit, excess columns collapse and items stretch. With auto-fill, empty columns remain, and items stay at their minimum size.

When you place more items than your explicit grid definition accounts for, CSS Grid creates implicit tracks to hold the extra items. You can control the size of these implicit tracks:

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 150px;    /* implicit rows are 150px */
}

The grid-auto-flow property controls how auto-placed items fill the grid:

• row (default) — Items fill each row before moving to the next.
• column — Items fill each column before moving to the next.
• dense — The browser tries to fill in holes earlier in the grid. Add it after row or column: grid-auto-flow: row dense.

.gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-flow: dense;  /* fill gaps */
}

.gallery .wide {
  grid-column: span 2;  /* some items span 2 columns */
}

Dense packing is great for image galleries where visual order does not need to match source order. However, avoid it for content where reading order matters, as it can reorder items visually.