Estructura · grid-col.css
Grid col (columnas de grid)
Define la cantidad de columnas de un grid entre 1 y 12, crea distribuciones automáticas con un mínimo de 200px y adapta la composición mediante breakpoints.
De 1 a 12 columnas
Genera tracks iguales con unidades fraccionales.
Columnas automáticas
Incluye auto-fit y auto-fill con una base mínima de 200px.
Responsive por contenedor
Cambia la cantidad de columnas en siete breakpoints reales.
Código + resultado
Ejemplos reales de grid col
Observa cómo el contenedor distribuye sus hijos dentro de columnas iguales o automáticas.
<div class="grid grid-col-2">
<strong>Columna 1</strong>
<span>Columna 2</span>
</div>
<div class="grid grid-col-3">
<strong>Columna 1</strong>
<span>Columna 2</span>
</div>
<div class="grid grid-col-4">
<strong>Columna 1</strong>
<span>Columna 2</span>
</div>
<div class="grid grid-auto-fit">
<strong>Item fluido 1</strong>
<span>Item fluido 2</span>
</div>
<div class="grid grid-auto-fill">
<strong>Item automático 1</strong>
<span>Item automático 2</span>
</div>
<div class="grid grid-col-4 grid-col-768-1">
<strong>Columna 1</strong>
<span>Columna 2</span>
</div>
Referencia
Clases grid-col
Las clases se aplican al contenedor y definen sus tracks, no el span individual de los items.
| Clase | Columnas | Definición | Uso recomendado |
|---|---|---|---|
.grid | — | display: grid | Activa el contexto grid. |
.grid-auto | 12 | repeat(12, 1fr) | Retícula automática de doce columnas. |
.grid-auto-fit | Automáticas | minmax(200px, 1fr) | Colapsa tracks vacíos. |
.grid-auto-fill | Automáticas | minmax(200px, 1fr) | Conserva tracks automáticos vacíos. |
.grid-col-1 | 1 | repeat(1, 1fr) | Una columna. |
.grid-col-2 | 2 | repeat(2, 1fr) | Dos columnas iguales. |
.grid-col-3 | 3 | repeat(3, 1fr) | Tres columnas iguales. |
.grid-col-4 | 4 | repeat(4, 1fr) | Cuatro columnas iguales. |
.grid-col-5 | 5 | repeat(5, 1fr) | Cinco columnas iguales. |
.grid-col-6 | 6 | repeat(6, 1fr) | Seis columnas iguales. |
.grid-col-7 | 7 | repeat(7, 1fr) | Siete columnas iguales. |
.grid-col-8 | 8 | repeat(8, 1fr) | Ocho columnas iguales. |
.grid-col-9 | 9 | repeat(9, 1fr) | Nueve columnas iguales. |
.grid-col-10 | 10 | repeat(10, 1fr) | Diez columnas iguales. |
.grid-col-11 | 11 | repeat(11, 1fr) | Once columnas iguales. |
.grid-col-12 | 12 | repeat(12, 1fr) | Doce columnas iguales. |
.grid-col-640-[n] | 1–12 | repeat(n, 1fr) | Override para ≤640px. |
.grid-col-768-[n] | 1–12 | repeat(n, 1fr) | Override para ≤768px. |
.grid-col-1280-[n] | 1–12 | repeat(n, 1fr) | Override para ≤1280px. |
.grid-col-1536-[n] | 1–12 | repeat(n, 1fr) | Override para ≤1536px. |
.grid-col-2560-[n] | 1–12 | repeat(n, 1fr) | Override para ≤2560px. |
.grid-col-3840-[n] | 1–12 | repeat(n, 1fr) | Override para ≤3840px. |
.grid-col-6016-[n] | 1–12 | repeat(n, 1fr) | Override para ≤6016px. |
Recomendaciones
Buenas prácticas con grid col
Activa grid
Combina siempre la definición de columnas con la clase .grid.
Usa auto-fit para fluidez
Permite que los items existentes aprovechen el espacio sobrante.
Reduce columnas en móvil
Un override simple suele ser suficiente para mantener la legibilidad.
Separa con gap
Define la separación en el padre sin modificar el tamaño de los tracks.