grid-auto-columns
Sets the size of implicitly created columns. Applied when columns not defined by grid-template-columns are automatically generated.
Class List
| Class | CSS | Description |
|---|---|---|
gac1fr | grid-auto-columns: 1fr | Creates implicit columns at equal proportions |
gac100px | grid-auto-columns: 100px | Creates implicit columns at 100px fixed size |
gac20rem | grid-auto-columns: 20rem | Creates implicit columns at 200px (20rem) size |
gac200px | grid-auto-columns: 200px | Creates implicit columns at 200px fixed size |
Usage Examples
Controls the size of automatically generated columns when items exceed the column range defined by grid-column.
<!-- 2 columns defined + implicit column size -->
<div class="dg gtc1fr-1fr gac1fr gap16px">
<div>1</div>
<div>2</div>
<div>3 (implicit column)</div>
</div>
<!-- Fixed size implicit columns -->
<div class="dg gtc1fr gac200px gap16px">
<div>Defined column</div>
<div>Implicit 200px column</div>
</div>Visual Comparison
Default (auto) — dg
1234
gac1fr — dg gac1fr
1234
Tips & Notes
What are implicit columns?
When there are more items than columns defined by gtc, or when gcs/gce exceeds the range, columns are automatically created. gac determines their size.
Use with grid-auto-flow
The default flow is in the row direction. For column-direction auto-placement, specify grid-auto-flow: column together for gac to be meaningful.