Diagramación
El contenedor .container es el elemento base para centrar y limitar el ancho del contenido en páginas. Provee un max-width fijo, márgenes automáticos para centrar y padding horizontal responsivo para mantener distancia con los bordes de la ventana.
Opciones
| clase | max-width |
.container | 1280px |
.alignwide | 1440px |
.alignfull | 100vw |
Las clases .alignwide y .alignfull están pensadas para bloques que deben romper el ancho estándar dado por .container. Por ejemplo, en banners o secciones destacadas.
Ejemplo
HTML
<!-- Contenedor base -->
<div class="container py-40">
<div class="px-24 py-12 bg-neutral-gray-50">.container</div>
<!-- Ancho amplio -->
<div class="alignwide">
<div class="px-24 py-12 bg-neutral-gray-200 my-24">.alignwide</div>
</div>
<!-- Ancho completo -->
<div class="alignfull">
<div class="px-24 py-12 bg-neutral-gray-200 my-24">.alignfull</div>
</div>
</div>