grid-auto-columns
En esta página
| Clase | Propiedades CSS |
|---|---|
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); |
auto-cols-<number> |
grid-auto-columns: calc(var(--spacing) * <number>); |
auto-cols-(<custom-property>) |
grid-auto-columns: var(<custom-property>); |
auto-cols-[<value>] |
grid-auto-columns: <value>; |
Examples#
Basic example#
Use utilities like auto-cols-min and auto-cols-max to control the size of implicitly-created grid columns:
<!-- [!code classes:auto-cols-max] -->
<div class="grid auto-cols-max grid-flow-col">
<div>01</div>
<div>02</div>
<div>03</div>
</div>