Grid Auto Columns

Utilities for controlling the size of implicitly-created grid columns.

Class Properties
.auto-cols-auto grid-auto-columns: auto;
.auto-cols-min grid-auto-columns: min-content;
.auto-cols-max grid-auto-columns: max-content;
.auto-cols-fr grid-auto-columns: minmax(0, 1fr);

Usage

Use the auto-cols-{size} utilities to control the size implicitly-created grid columns.

Responsive

To control the grid-auto-columns property at a specific breakpoint, add @{breakpoint} the end of the utility.

Variants

By default, only responsive variants are generated for grid-auto-columns. You can control which variants are generated by modifying the $utility-configuration in _settings.scss.