Flexbox & Grid
Utilidades para controlar el tamaño de las columnas de cuadrícula creadas implícitamente.
| Clase | Estilos |
|---|---|
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-(<custom-property>) | grid-auto-columns: var(<custom-property>); |
auto-cols-[<value>] | grid-auto-columns: <value>; |
Utiliza utilidades como auto-cols-min y auto-cols-max para controlar el tamaño de las columnas de cuadrícula creadas implícitamente:
<div class="grid auto-cols-max grid-flow-col"> <div>01</div> <div>02</div> <div>03</div></div>Usa la sintaxis auto-cols-[<value>] para establecer el size of implicitly-created grid columns basado en un valor completamente personalizado:
<div class="auto-cols-[minmax(0,2fr)] ..."> <!-- ... --></div>Para variables CSS, también puedes usar la sintaxis auto-cols-(<custom-property>) :
<div class="auto-cols-(--my-auto-cols) ..."> <!-- ... --></div>Esto es solo un atajo para auto-cols-[var(<custom-property>)] que agrega la función var() por ti automáticamente.
Prefija una utilidad grid-auto-columns con una variante de breakpoint como md: para aplicar la utilidad solo en tamaños de pantalla medium y superiores:
<div class="grid grid-flow-col auto-cols-max md:auto-cols-min ..."> <!-- ... --></div>Aprende más sobre el uso de variantes en la documentación de variantes.