Flexbox & 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>); |
Usa 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>Usa la utilidad grid-rows-subgrid para adoptar las pistas de fila definidas por el padre del elemento:
<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 rows basado 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 agrega la función var() por ti automáticamente.
Prefija una utilidad grid-template-rows con una variante de breakpoint como md: para aplicar la utilidad solo en tamaños de pantalla medium y superiores:
<div class="grid grid-rows-2 md:grid-rows-6 ..."> <!-- ... --></div>Aprende más sobre el uso de variantes en la documentación de variantes.