Flexbox y Grid
Utilidades para especificar las filas en un diseño de cuadrícula.
| Clase | Estilos |
|---|---|
grid-rows-<number> | grid-template-rows: repeat(<number>, minmax(0, 1fr)); |
grid-rows-none | grid-template-rows: none; |
grid-rows-subgrid | grid-template-rows: subgrid; |
grid-rows-[<value>] | grid-template-rows: <value>; |
grid-rows-(<custom-property>) | grid-template-rows: var(<custom-property>); |
Utiliza utilidades grid-rows-<number> como grid-rows-2 y grid-rows-4 para crear cuadrículas con n filas de igual tamaño:
<div class="grid grid-flow-col grid-rows-4 gap-4"> <div>01</div> <!-- ... --> <div>09</div></div>Utiliza la utilidad grid-rows-subgrid para adoptar las pistas de filas definidas por el elemento padre:
<div class="grid grid-flow-col grid-rows-4 gap-4"> <div>01</div> <!-- ... --> <div>05</div> <div class="row-span-3 grid grid-rows-subgrid gap-4"> <div class="row-start-2">06</div> </div> <div>07</div> <!-- ... --> <div>10</div></div>Usa la sintaxis grid-rows-[<value>] para establecer el/la filas basándose en un valor completamente personalizado:
<div class="grid-rows-[200px_minmax(900px,1fr)_100px] ..."> <!-- ... --></div>Para variables CSS, también puedes usar la sintaxis grid-rows-(<custom-property>) :
<div class="grid-rows-(--my-grid-rows) ..."> <!-- ... --></div>Esto es solo un atajo para grid-rows-[var(<custom-property>)] que añade la función var() por ti automáticamente.
Antepone a la utilidad grid-template-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-rows-2 md:grid-rows-6 ..."> <!-- ... --></div>Obtén más información sobre el uso de variantes en la documentación de variantes.