Estructura · grid-col-span.css
Grid col span (ocupación de columnas)
Controla cuántas columnas ocupa un item dentro de un grid. El sistema ofrece spans de 1 a 12 y variantes para todos los breakpoints de QuicklyCSS.
Spans de 1 a 12
Expresa la ocupación del item directamente en columnas.
Items independientes
Cada hijo puede ocupar una cantidad distinta dentro del mismo grid.
Overrides adaptables
Modifica el span en resoluciones específicas mediante max-width.
Código + resultado
Ejemplos reales de grid col span
Los resultados se renderizan dentro de un grid real de doce columnas.
<div class="grid grid-col-12">
<article class="grid-col-span-3">
<strong>Span de 3 columnas</strong>
<span>Este item ocupa el 25% del grid padre.</span>
</article>
</div>
<div class="grid grid-col-12">
<article class="grid-col-span-6">
<strong>Span de 6 columnas</strong>
<span>Este item ocupa el 50% del grid padre.</span>
</article>
</div>
<div class="grid grid-col-12">
<article class="grid-col-span-9">
<strong>Span de 9 columnas</strong>
<span>Este item ocupa el 75% del grid padre.</span>
</article>
</div>
<div class="grid grid-col-12">
<article class="grid-col-span-6 grid-col-span-768-12">
<strong>6 columnas → 12 columnas</strong>
<span>Ocupa la mitad como base y todo el grid cuando el viewport es igual o menor a 768px.</span>
</article>
</div>
Referencia
Clases grid-col-span
La escala indica cuántas columnas consecutivas ocupa el item dentro del grid.
| Clase | Span | En grid de 12 | Uso recomendado |
|---|---|---|---|
.grid-col-span-1 | 1 | 8.333333% | Elemento mínimo. |
.grid-col-span-2 | 2 | 16.666667% | Control compacto. |
.grid-col-span-3 | 3 | 25% | Cuarto del grid. |
.grid-col-span-4 | 4 | 33.333333% | Tercio del grid. |
.grid-col-span-5 | 5 | 41.666667% | Composición asimétrica. |
.grid-col-span-6 | 6 | 50% | Mitad del grid. |
.grid-col-span-7 | 7 | 58.333333% | Contenido principal asimétrico. |
.grid-col-span-8 | 8 | 66.666667% | Dos tercios del grid. |
.grid-col-span-9 | 9 | 75% | Tres cuartos del grid. |
.grid-col-span-10 | 10 | 83.333333% | Contenido casi completo. |
.grid-col-span-11 | 11 | 91.666667% | Margen estructural mínimo. |
.grid-col-span-12 | 12 | 100% | Fila completa. |
.grid-col-span-640-[n] | 1–12 | Variable | Override para ≤640px. |
.grid-col-span-768-[n] | 1–12 | Variable | Override para ≤768px. |
.grid-col-span-1024-[n] | 1–12 | Variable | Override para ≤1024px. |
.grid-col-span-1280-[n] | 1–12 | Variable | Override para ≤1280px. |
.grid-col-span-1536-[n] | 1–12 | Variable | Override para ≤1536px. |
.grid-col-span-2560-[n] | 1–12 | Variable | Override para ≤2560px. |
.grid-col-span-3840-[n] | 1–12 | Variable | Override para ≤3840px. |
.grid-col-span-6016-[n] | 1–12 | Variable | Override para ≤6016px. |
Recomendaciones
Buenas prácticas con grid col span
Define el grid padre
El span sólo tiene sentido dentro de un contenedor grid con columnas.
Respeta la escala
En un grid de doce columnas, evita spans superiores a doce.
Amplía en móvil
Los contenidos principales suelen pasar a span completo en pantallas pequeñas.
Usa gap en el padre
La separación pertenece al grid, no al ancho individual del item.