Codectionary / Developer documentation / CSS

Grid auto-fit versus auto-fill

auto-fit and auto-fill repeat grid tracks as many times as fit in the container.

What it is and why to use it

auto-fit and auto-fill repeat grid tracks as many times as fit in the container. Both help build responsive collections without a separate breakpoint for each column count. After placement, auto-fit collapses empty repeated tracks, while auto-fill retains them; that difference appears when there is spare room and few items.

Common mistakes and limitations

The minimum is still a minimum: 8rem can overflow a narrower container. Auto-repeat has sizing restrictions and is not a general replacement for every repeat count. Keep source order meaningful for keyboard and screen-reader navigation.

Try the example

The example pairs editable CSS with its own HTML preview. Run it, then change one declaration at a time and compare the result. Locally, put the CSS in a style element in the document head or in an external stylesheet linked from the HTML. Feature support varies by browser and version; use the linked reference and a useful fallback where needed.

HTML used by this example

<h3>auto-fit: occupied tracks stretch</h3><div class="cards"><div class="card">HTML</div><div class="card">CSS</div></div><h3>auto-fill: empty tracks remain</h3><div class="cards keep-empty"><div class="card">HTML</div><div class="card">CSS</div></div>

Syntax

repeat(auto-fit, minmax(8rem, 1fr))

Examples

Grid auto-fit versus auto-fill

Run the CSS against the supplied HTML, then experiment with the values.

.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr)); gap: 1rem; width: 32rem; max-width: 100%; }
.cards.keep-empty { grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr)); }
.card { padding: 1rem; background: #dcfce7; color: #14532d; }
  1. The repeat expression creates as many tracks of at least 8rem as fit.
  2. The two cards stretch into the available space because auto-fit collapses unused repeated tracks.
  3. Change auto-fit to auto-fill and widen the preview: retained empty tracks can leave unused slots. This is useful for choosing between stretching a small result set and keeping uniform slot widths.
HTML used by this example
<div class="demo"><h3>auto-fit: occupied tracks stretch</h3><div class="cards"><div class="card">HTML</div><div class="card">CSS</div></div><h3>auto-fill: empty tracks remain</h3><div class="cards keep-empty"><div class="card">HTML</div><div class="card">CSS</div></div></div>

Best practices

  • The minimum is still a minimum: 8rem can overflow a narrower container. Auto-repeat has sizing restrictions and is not a general replacement for every repeat count. Keep source order meaningful for keyboard and screen-reader navigation.
  • Inspect the relevant browser reference and test the browsers used by your audience.

Runtime & versions

Web browsers. Feature availability depends on the language and runtime version used by your project; consult the official reference below.

CSS specifications (modules)

Specifications & further reading