Containers
Definen anchos máximos y variantes estructurales para diferentes contextos de contenido.
Layout
Layout define la estructura horizontal del sistema: containers, grid, columnas y proporciones para construir páginas, bloques y relaciones espaciales.
Qué resuelve layout
El módulo layout organiza la estructura horizontal del framework. Su responsabilidad es definir cómo se comportan los contenedores, cómo se distribuyen las columnas y cómo se construyen relaciones espaciales más complejas.
No resuelve tipografía ni helpers puntuales. Layout se ocupa del andamiaje principal sobre el que luego trabajan rhythm, spacing y align.
Qué incluye este módulo
Grid
Activa la estructura de columnas y coordina el comportamiento general del layout.
Columnas
Permiten controlar cuántas columnas tendrá un layout en cada breakpoint.
Proporciones
Permiten construir relaciones como 2-1, 1-2 o 3-1 para layouts editoriales.
Ejemplo base del módulo
Contenido principal
<section class="section">
<div class="container container-xl">
<div class="grid cols-1 lg:cols-2-1 gap-md">
<article>Contenido principal</article>
<aside>Sidebar</aside>
</div>
</div>
</section>Qué sí y qué no va en layout
Qué sí debe contener
- Containers.
- Grid base.
- Column count.
- Proporciones estructurales.
- Relaciones entre columnas.
Qué no debe contener
- Spacing direccional.
- Align helpers.
- Tipografía.
- Transformaciones de texto.
- Estilos específicos de componentes del proyecto.
Cómo se relaciona con otros módulos
- Layout construye estructura horizontal.
- Sections agrega ritmo macro entre bloques grandes.
- Stack controla el flujo vertical interno.
- Spacing ajusta separaciones puntuales.
- Align resuelve composición flex dentro de bloques.
Siguiente paso
Continúa con containers para entender cómo el sistema controla el ancho estructural del contenido.