# Containers (fluido y porcentual)

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

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

Estructura · containers.css

El sistema de containers define el marco donde vive tu interfaz: centraliza el contenido, limita el ancho y mantiene una lectura consistente entre pantallas.

v2.0

▣

## Ancho estándar
Define un patrón de ancho compartido y evita valores aislados en cada vista.

◇

## Diseño consistente
Controla la longitud de línea y conserva una composición uniforme.

▦

## Overrides por breakpoint
Ajusta el porcentaje con las variantes incluidas en QuicklyCSS.

i

## Problema que resuelve
Sin containers, cada sección termina “inventando” su ancho con wrappers distintos, ajustes manuales y CSS duplicado. QuicklyCSS concentra esa decisión en clases reutilizables para obtener layouts previsibles.

✦

## Convención real de clases
Usa `.qy-cont`, `.qy-cont-fluid`, las escalas `.qy-cont-5` a `.qy-cont-10` y variantes como `.qy-cont-768-8`. Los breakpoints trabajan con `max-width`.

Código + resultado

## Ejemplos reales de containers

Selecciona una clase para comparar su marcado y el ancho que produce.

HTML

Resultado aplicado  100%

viewport  100%

.qy-cont funciona como alias base y puede combinarse con variantes por breakpoint.

```html
<main class="qy-cont">
  <strong>Contenedor base</strong>
  <span>Alias semántico al 100% que estandariza el uso del sistema.</span>
</main>
```

.qy-cont-fluid conserva width: 100% y max-width: 100%.

```html
<section class="qy-cont-fluid">
  <strong>Contenedor fluido</strong>
  <span>Ocupa el ancho completo disponible y es útil para fondos o bandas.</span>
</section>
```

.qy-cont-8 aplica max-width: 80%. Las escalas disponibles van de 5 a 10.

```html
<main class="qy-cont-8">
  <strong>Contenedor porcentual · 80%</strong>
  <span>Limita el contenido al 80% y lo centra con margin-inline: auto.</span>
</main>
```

.qy-cont-768-10 se activa con @media (max-width: 768px). Cambia el tamaño de la ventana para probarlo.

```html
<main class="qy-cont-8 qy-cont-768-10">
  <strong>Base 80% · móvil 100%</strong>
  <span>Desde 768px hacia abajo, el override amplía el contenedor al 100%.</span>
</main>
```

Referencia

## Clases de containers

Todas parten de `width: 100%`, centrado con `margin-inline: auto` y un `max-width` porcentual.

| Clase | Breakpoint | Max-width | Uso recomendado |
| --- | --- | --- | --- |
| .qy-cont | Base | 100% | Alias semántico del contenedor base. |
| .qy-cont-fluid | Base | 100% | Bandas y secciones que ocupan todo el ancho. |
| .qy-cont-10 | Base | 100% | Punto de partida para composiciones responsivas. |
| .qy-cont-9 | Base | 90% | Wrapper general con margen lateral visible. |
| .qy-cont-8 | Base | 80% | Contenido editorial y layouts centrados. |
| .qy-cont-7 | Base | 70% | Landings y contenido focalizado. |
| .qy-cont-6 | Base | 60% | Lectura prolongada y formularios. |
| .qy-cont-5 | Base | 50% | Bloques destacados de ancho reducido. |
| .qy-cont-[bp]-[n] | 640–6016px | 50%–100% | Patrón para ajustar la escala en un breakpoint. |
| .qy-cont-640-[n] | ≤ 640px | 50%–100% | Primer ajuste para pantallas pequeñas. |
| .qy-cont-768-[n] | ≤ 768px | 50%–100% | Ajuste para tablet y móvil amplio. |
| .qy-cont-1024-[n] | ≤ 1024px | 50%–100% | Transición hacia desktop. |
| .qy-cont-1280-[n] | ≤ 1280px | 50%–100% | Desktop estándar. |
| .qy-cont-1536-[n] | ≤ 1536px | 50%–100% | Pantallas grandes. |
| .qy-cont-2560-[n] | ≤ 2560px | 50%–100% | Resoluciones 2K. |
| .qy-cont-3840-[n] | ≤ 3840px | 50%–100% | Resoluciones 4K. |
| .qy-cont-6016-[n] | ≤ 6016px | 50%–100% | Pantallas de gran formato. |

Regla del sistema  n = 5…10 → 50%…100%. El breakpoint determina cuándo se aplica el ancho; la escala determina cuánto ocupa.

Recomendaciones

## Buenas prácticas con containers

01
### Define un patrón base
Repite una combinación estable, por ejemplo `.qy-cont-8 .qy-cont-768-10`.

02
### Piensa con max-width
Las variantes se activan cuando el viewport es igual o menor al breakpoint.

03
### Separa ancho y layout
Usa containers para el ancho exterior y grid o flex para la composición interna.

04
### Limita la profundidad
Dos o tres niveles —sección, wrapper y contenido— suelen ser suficientes.