Framework Documentation

Containers

Layout Width Structure

Containers controlan el ancho estructural del contenido y establecen los límites horizontales de lectura, composición y layout.

Overview

Qué resuelven los containers

El sistema de containers define el ancho máximo del contenido dentro del framework. Su función es evitar que los bloques se expandan de forma arbitraria y asegurar una estructura legible, controlada y consistente.

Los containers no crean layout por sí solos. Actúan como el marco horizontal sobre el que luego trabajan grid, stack, spacing y el resto de módulos.

Source File

Referencia del archivo

:root {
  --container-padding: var(--space-3);

  --container-xs: 360px;
  --container-sm: 576px;
  --container-md: 768px;
  --container-lg: 960px;
  --container-default: 1200px;
  --container-xl: 1440px;
  --container-xxl: 1536px;
}

.container {
  width: 100%;
  max-width: var(--container-default);
  margin-inline: auto;
  padding-inline: var(--container-padding);
}

.container-xs  { max-width: var(--container-xs); }
.container-sm  { max-width: var(--container-sm); }
.container-md  { max-width: var(--container-md); }
.container-lg  { max-width: var(--container-lg); }
.container-xl  { max-width: var(--container-xl); }
.container-xxl { max-width: var(--container-xxl); }

.container-full {
  width: 100%;
  max-width: none;
  margin-inline: 0;
  padding-inline: var(--container-padding);
}

Base Container

Container principal

.container

Es la clase estructural base del sistema. Define un ancho máximo por defecto, centra el contenido y agrega padding horizontal consistente. 

<div class="container">
  ...
</div>

Qué hace

  • Ocupa el 100% del ancho disponible.
  • Limita el ancho con max-width.
  • Centra el bloque con margin-inline: auto.
  • Protege el contenido con padding horizontal.

Variants

Variantes del sistema

XS

Container XS

Útil para bloques muy compactos o layouts muy contenidos.

SM

Container SM

Buen ancho para formularios pequeños o bloques centrados.

MD

Container MD

Ideal para lectura, documentación o bloques editoriales medianos.

LG

Container LG

Útil para secciones amplias sin llegar al máximo del sistema.

Default

Container base

Es el ancho general del framework para la mayoría de layouts.

XL

Container XL

Diseñado para páginas con más aire horizontal o estructuras grandes.

XXL

Container XXL

Reservado para layouts muy amplios o interfaces extensas.

Full

Container Full

Permite ocupar todo el ancho sin límite máximo, manteniendo padding lateral.

Usage

Cuándo usar cada container

  • XS / SM → formularios, módulos compactos, bloques centrados.
  • MD → documentación, artículos, lectura y piezas editoriales.
  • LG → secciones generales de página con aire suficiente.
  • Default → ancho estructural principal del framework.
  • XL / XXL → dashboards, layouts amplios o grids grandes.
  • Full → fondos, cabeceras, secciones visuales o componentes a ancho completo.

Examples

Ejemplos de uso

Bloque editorial

<section class="section">
  <div class="container container-md">
    <div class="stack stack-md">
      <h2 class="title title-lg fnt-uppercase">Título</h2>
      <p>Contenido editorial</p>
    </div>
  </div>
</section>

Sección amplia

<section class="section">
  <div class="container container-xl">
    <div class="grid cols-1 lg:cols-3 gap-md">
      ...
    </div>
  </div>
</section>

Ancho completo

<section class="section">
  <div class="container-full">
    ...
  </div>
</section>

Connections

Relación con grid

Container y grid trabajan juntos. El container define el marco horizontal del bloque; grid define la distribución interna de columnas. 

<div class="container container-xl">
  <div class="grid cols-1 md:cols-2 lg:cols-3 gap-md">
    ...
  </div>
</div>

Boundaries

Qué sí y qué no va en containers

Qué sí debe contener

  • Anchos máximos del sistema.
  • Container base.
  • Variantes de tamaño.
  • Container full.
  • Padding horizontal estructural.

Qué no debe contener

  • Grid.
  • Spacing direccional.
  • Flex helpers.
  • Tipografía.
  • Decoración visual del proyecto.

Siguiente paso

Continúa con grid para entender cómo se distribuyen las columnas dentro del sistema.

Volver a layout Ir a grid