grid-auto-columns

Size columns created outside the explicit grid track list.

Overview

Basic usage

Size implicit columns

grid-auto-columns sizes columns outside the explicit track list. This grid defines one 80px column. Column auto-flow places the next two items into new 72px columns; the blue item is in the first implicit column.

<div id="layout" class="grid grid-auto-columns:72px grid-auto-flow:column grid-template-columns:80px grid-template-rows:64px gap-md w:17.5rem max-w:100%">  <div id="peer" class="p-sm">80px</div>  <div id="target" class="p-sm">72px</div>  <div id="item-3" class="p-sm">72px</div></div>

The 80px explicit column is unchanged. Implicit columns can also arise when an item is placed beyond the explicit grid. Fixed tracks keep their size even if their total width exceeds the container; choose smaller or flexible tracks, or provide a scrollable wrapper when that overflow is intentional.

Apply conditionally

Use conditional queries to change the layout at a real viewport width. The explicit column stays 80px. The two implicit columns grow from 56px to 80px at sm; only their sizing rule changes.

<div id="layout" class="grid grid-auto-columns:56px grid-auto-flow:column grid-template-columns:80px grid-template-rows:64px gap-md w:17.5rem max-w:100% grid-auto-columns:80px@sm">  <div id="peer" class="p-sm">Fixed</div>  <div id="target" class="p-sm">01</div>  <div id="item-3" class="p-sm">02</div></div>