# Grid col (columnas de grid)

> Documentación de QuicklyCSS V2 2.0.0-alpha.2. Versión preliminar.

- Página canónica: https://quicklycss.cl/docs/grid-col.php
- Catálogo de API: https://quicklycss.cl/quicklycss-api.json
- Índice para IA: https://quicklycss.cl/llms.txt

Estructura · grid-col.css

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.

v2.0

▦

## 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.

i

## Problema que resuelve
Centraliza la definición de columnas para evitar repetir `grid-template-columns` y media queries en cada componente.

✦

## Convención real de clases
Combina `.grid` con `.grid-col-{n}`, `.grid-auto`, `.grid-auto-fit` o `.grid-auto-fill`. Este archivo no incluye variantes para 1024px.

Código + resultado

## Ejemplos reales de grid col

Observa cómo el contenedor distribuye sus hijos dentro de columnas iguales o automáticas.

HTML

Resultado aplicado  2 columnas

contenedor grid  hijos directos

.grid-col-2 crea dos columnas iguales con repeat(2, 1fr).

```html
<div class="grid grid-col-2">
  <strong>Columna 1</strong>
  <span>Columna 2</span>
</div>
```

.grid-col-3 crea tres tracks iguales; el tercero queda disponible para otro item.

```html
<div class="grid grid-col-3">
  <strong>Columna 1</strong>
  <span>Columna 2</span>
</div>
```

.grid-col-4 crea cuatro tracks iguales; los items se colocan siguiendo el flujo del grid.

```html
<div class="grid grid-col-4">
  <strong>Columna 1</strong>
  <span>Columna 2</span>
</div>
```

.grid-auto-fit colapsa tracks vacíos y permite que los items existentes ocupen el espacio.

```html
<div class="grid grid-auto-fit">
  <strong>Item fluido 1</strong>
  <span>Item fluido 2</span>
</div>
```

.grid-auto-fill conserva los tracks automáticos disponibles aunque no todos tengan contenido.

```html
<div class="grid grid-auto-fill">
  <strong>Item automático 1</strong>
  <span>Item automático 2</span>
</div>
```

La composición cambia de cuatro columnas a una cuando el viewport es igual o menor a 768px.

```html
<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. |

Regla del sistema  Grid-col define los tracks del contenedor. Grid-col-span controla después cuántos tracks ocupa cada item.

Recomendaciones

## Buenas prácticas con grid col

01
### Activa grid
Combina siempre la definición de columnas con la clase `.grid`.

02
### Usa auto-fit para fluidez
Permite que los items existentes aprovechen el espacio sobrante.

03
### Reduce columnas en móvil
Un override simple suele ser suficiente para mantener la legibilidad.

04
### Separa con gap
Define la separación en el padre sin modificar el tamaño de los tracks.