Estructura · grid-row-span.css
Grid row span (ocupación de filas)
Controla cuántas filas ocupa un item dentro de un grid. La escala real incluye spans de 1 a 12 y variantes para todos los breakpoints de QuicklyCSS.
Spans de 1 a 12
Expresa directamente cuántas filas consecutivas ocupa cada item.
Composición vertical
Permite destacar tarjetas o módulos con alturas estructurales distintas.
Overrides adaptables
Cambia el span por resolución mediante las variantes de breakpoint reales.
Código + resultado
Ejemplos reales de grid row span
El resultado usa un grid real; la altura del item permite comparar cuántas filas ocupa cada clase.
<div class="grid">
<article class="grid-row-span-2">
<strong>Span de 2 filas</strong>
<span>Este item ocupa dos filas del grid padre.</span>
</article>
</div>
<div class="grid">
<article class="grid-row-span-3">
<strong>Span de 3 filas</strong>
<span>Este item ocupa tres filas del grid padre.</span>
</article>
</div>
<div class="grid">
<article class="grid-row-span-4">
<strong>Span de 4 filas</strong>
<span>Este item ocupa cuatro filas del grid padre.</span>
</article>
</div>
<div class="grid">
<article class="grid-row-span-4 grid-row-span-768-1">
<strong>4 filas → 1 fila</strong>
<span>Ocupa cuatro filas como base y una fila cuando el viewport es igual o menor a 768px.</span>
</article>
</div>
Referencia
Clases grid-row-span
La escala indica cuántas filas consecutivas ocupa el item dentro del grid padre.
| Clase | Filas | Propiedad aplicada | Uso recomendado |
|---|---|---|---|
.grid-row-span-1 | 1 | grid-row: span 1 | Item de altura base. |
.grid-row-span-2 | 2 | grid-row: span 2 | Tarjeta compacta destacada. |
.grid-row-span-3 | 3 | grid-row: span 3 | Módulo vertical medio. |
.grid-row-span-4 | 4 | grid-row: span 4 | Tarjeta principal del mosaico. |
.grid-row-span-5 | 5 | grid-row: span 5 | Contenido vertical extenso. |
.grid-row-span-6 | 6 | grid-row: span 6 | Media escala de doce filas. |
.grid-row-span-7 | 7 | grid-row: span 7 | Composición asimétrica amplia. |
.grid-row-span-8 | 8 | grid-row: span 8 | Panel vertical dominante. |
.grid-row-span-9 | 9 | grid-row: span 9 | Contenido de gran altura. |
.grid-row-span-10 | 10 | grid-row: span 10 | Módulo casi completo. |
.grid-row-span-11 | 11 | grid-row: span 11 | Ocupación vertical extendida. |
.grid-row-span-12 | 12 | grid-row: span 12 | Escala vertical completa. |
.grid-row-span-640-[n] | 1–12 | Variable | Override para ≤640px. |
.grid-row-span-768-[n] | 1–12 | Variable | Override para ≤768px. |
.grid-row-span-1024-[n] | 1–12 | Variable | Override para ≤1024px. |
.grid-row-span-1280-[n] | 1–12 | Variable | Override para ≤1280px. |
.grid-row-span-1536-[n] | 1–12 | Variable | Override para ≤1536px. |
.grid-row-span-2560-[n] | 1–12 | Variable | Override para ≤2560px. |
.grid-row-span-3840-[n] | 1–12 | Variable | Override para ≤3840px. |
.grid-row-span-6016-[n] | 1–12 | Variable | Override para ≤6016px. |
Recomendaciones
Buenas prácticas con grid row span
Define filas en el padre
El span necesita un grid cuyas filas explícitas o automáticas tengan una altura coherente.
Alinea el contenido
Comprueba que el contenido pueda crecer sin desbordarse dentro del espacio asignado.
Compacta en móvil
Reduce los spans grandes cuando una composición vertical ya no aporta jerarquía.
Usa gap en el padre
La separación entre filas pertenece al grid, no a cada item individual.