Flexbox y Grid
Utilidades para controlar el tamaño de las filas de cuadrícula creadas implícitamente.
| Clase | Estilos |
|---|---|
auto-rows-auto | grid-auto-rows: auto; |
auto-rows-min | grid-auto-rows: min-content; |
auto-rows-max | grid-auto-rows: max-content; |
auto-rows-fr | grid-auto-rows: minmax(0, 1fr); |
auto-rows-(<custom-property>) | grid-auto-rows: var(<custom-property>); |
auto-rows-[<value>] | grid-auto-rows: <value>; |
Utiliza utilidades como auto-rows-min y auto-rows-max para controlar el tamaño de las filas de cuadrícula creadas implícitamente:
<div class="grid grid-flow-row auto-rows-max"> <div>01</div> <div>02</div> <div>03</div></div>Usa la sintaxis auto-rows-[<value>] para establecer el/la tamaño de las filas de cuadrícula creadas implícitamente basándose en un valor completamente personalizado:
<div class="auto-rows-[minmax(0,2fr)] ..."> <!-- ... --></div>Para variables CSS, también puedes usar la sintaxis auto-rows-(<custom-property>) :
<div class="auto-rows-(--my-auto-rows) ..."> <!-- ... --></div>Esto es solo un atajo para auto-rows-[var(<custom-property>)] que añade la función var() por ti automáticamente.
Antepone a la utilidad grid-auto-rows el prefijo de una variante de punto de ruptura como md: para aplicar la utilidad únicamente en tamaños de pantalla mediano y superiores:
<div class="grid grid-flow-row auto-rows-max md:auto-rows-min ..."> <!-- ... --></div>Obtén más información sobre el uso de variantes en la documentación de variantes.