Estructura · containers.css
Containers (fluido y porcentual)
El sistema de containers define el marco donde vive tu interfaz: centraliza el contenido, limita el ancho y mantiene una lectura consistente entre pantallas.
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.
Código + resultado
Ejemplos reales de containers
Selecciona una clase para comparar su marcado y el ancho que produce.
<main class="qy-cont">
<strong>Contenedor base</strong>
<span>Alias semántico al 100% que estandariza el uso del sistema.</span>
</main>
<section class="qy-cont-fluid">
<strong>Contenedor fluido</strong>
<span>Ocupa el ancho completo disponible y es útil para fondos o bandas.</span>
</section>
<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>
<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. |
Recomendaciones
Buenas prácticas con containers
Define un patrón base
Repite una combinación estable, por ejemplo .qy-cont-8 .qy-cont-768-10.
Piensa con max-width
Las variantes se activan cuando el viewport es igual o menor al breakpoint.
Separa ancho y layout
Usa containers para el ancho exterior y grid o flex para la composición interna.
Limita la profundidad
Dos o tres niveles —sección, wrapper y contenido— suelen ser suficientes.