Cómo elegir el ancho máximo del contenedor

Haz una pequeña medición antes de cualquier teoría. Abre un sitio con mucho texto en el que confíes —un periódico, un sitio de documentación, una revista de formato largo— en el monitor más ancho que tengas, y arrastra la ventana del navegador lentamente de estrecha a completa. La maquetación crece con la ventana durante un rato y luego, en algún punto pasados los 1100px, se detiene: las columnas se congelan y cada píxel adicional de ventana va a parar a los márgenes vacíos de ambos lados. Mide unos cuantos sitios con la regla de las herramientas de desarrollo y los puntos de parada se agrupan: la mayoría cae entre 1100 y 1400px.

Ese punto de parada es el ancho máximo del contenedor: el tope de cuánto puede crecer una maquetación. Por debajo del tope, la rejilla es fluida y absorbe el viewport; por encima, las columnas mantienen su tamaño, la página se centra y los márgenes absorben todo lo demás. Es un único número que limita cada maquetación del sistema, y este artículo —parte de nuestra guía de rejilla de maquetación— explica por qué existe el tope, de dónde salen los valores habituales y cuándo desactivarlo.

¿Qué hace realmente un ancho máximo de contenedor?

Divide el rango del viewport en dos regímenes. Por debajo del tope, las columnas de la rejilla se reparten el ancho que la ventana ofrezca —el régimen fluido, donde la maquetación y el viewport son la misma cosa—. Por encima del tope, la maquetación se desprende de la ventana: la rejilla mantiene el ancho para el que fue diseñada, se centra y son los márgenes los que crecen. En CSS todo el patrón es max-width más márgenes en línea automáticos:

.container {
  max-width: 1200px;    /* el tope */
  margin-inline: auto;  /* centra la página limitada */
  padding-inline: 66px; /* los márgenes exteriores de la rejilla */
}

Elegir max-width en lugar de width es lo que consigue ambos regímenes con una sola propiedad: un width: 1200px fijo se desbordaría en pantallas pequeñas, mientras que max-width solo entra en juego cuando la ventana lo supera.

¿Por qué poner tope a la maquetación?

Tres razones, en orden decreciente de peso.

Longitud de línea. El texto de cuerpo se lee mejor con unos 45–75 caracteres por línea —la clásica banda tipográfica— y una columna sin tope ignora por completo ese presupuesto: en un monitor de 2560px, un párrafo a todo ancho a 16px llega a unos (2560 − 132) ÷ 8 ≈ 300 caracteres por línea, varias veces por encima del límite superior de la banda. Este es el fallo que hace que el tope no sea opcional para cualquier cosa pensada para leerse.

Distancia de interacción. Los controles relacionados se separan a medida que la maquetación se estira: un panel de filtros fijado al borde izquierdo y los resultados que controla, desplazándose hacia la derecha, pueden acabar a más de media pantalla de distancia en una pantalla ultrapanorámica, y cada mirada entre ambos se convierte en un movimiento de cabeza en lugar de un movimiento de ojos.

Composición. Una maquetación diseñada a 1200px no conserva sus proporciones a 2400: el equilibrio entre imagen y texto del hero, las relaciones de espacio en blanco, el peso visual de una fila de tarjetas… todo se estira fuera de las proporciones para las que se diseñó. El tope es lo que permite que una composición siga siendo la composición.

¿De dónde salen los valores habituales?

El rango de 1100–1400px domina porque es ahí donde caen doce columnas con un ancho de texto legible, más sus medianiles y márgenes. Puedes hacer la aritmética al revés y ver cómo la convención se ensambla sola.

Parte del texto. El texto de cuerpo de formato largo suele componerse en torno a 18–21px; a 21px un carácter medio ocupa ≈10,5px, así que una línea de 66 caracteres —la clásica medida cómoda— necesita una columna de ≈693px. Asigna a esa columna de artículo 8 de las 12 columnas de la rejilla. Con medianiles de 24px, el tramo debe cumplir 8 × ancho de columna + 7 × 24 ≈ 696px, lo que da un ancho de columna de 66px. Ahora suma toda la rejilla con los valores de escritorio por defecto de Scale Composer:

12 × 66  (columns)  =  792px
11 × 24  (gutters)  =  264px
 2 × 66  (margins)  =  132px
                       ──────
grid total          = 1188px  ≈ the 1200px convention

Tamaños de cuerpo más pequeños desplazan los tramos, no la conclusión: a 16px, una columna de 66 caracteres mide ≈528px, cerca de un tramo de 6 de 12 (≈516px). En cualquier caso, el tope cae en el mismo vecindario, porque responde a la misma pregunta: el ancho máximo del contenedor es el ancho al que una rejilla de 12 columnas llena de texto legible se queda sin razones para crecer. El rango de 1100–1400px no es moda; es esta aritmética evaluada con distintos tamaños de cuerpo y medianiles.

Abre la anatomía del contenedor de 1200px en Scale Composer: el ancho máximo del contenedor es un único valor global en todos los breakpoints, y las doce columnas de 66px del nivel de escritorio, con medianiles de 24px y márgenes de 66px, suman 1188px dentro de él.

¿Cuándo no debería llevar tope una maquetación?

Dos excepciones consolidadas, una parcial y otra total.

Secciones a sangre completa (full-bleed). Los heroes, las bandas multimedia y los campos de color de borde a borde escapan del contenedor, pero su contenido se queda dentro. El patrón es una sección exterior sin max-width que lleva el fondo, y un contenedor interior, con tope y centrado, que lleva el texto y los controles:

.band {
  /* a sangre completa: el fondo y las imágenes van de borde a borde */
}
.band > .container {
  max-width: 1200px;    /* el contenido interior mantiene el tope */
  margin-inline: auto;
  padding-inline: 66px;
}

La banda obtiene el dramatismo del viewport completo; el titular que hay dentro sigue alineándose con todas las demás secciones con tope de la página.

Aplicaciones densas en datos. Los dashboards, las tablas de datos y los editores aprovechan de verdad el ancho: 400px extra son otra columna de datos visible, otra hora en la línea de tiempo. Una regla práctica útil, ofrecida como lo que es: los documentos se leen, las aplicaciones se operan; leer necesita el tope, operar a menudo no. Muchos productos son honestamente ambas cosas y reparten la diferencia: las páginas de marketing y documentación con tope, la superficie de la app fluida.

Desactiva el tope y observa

La distinción se entiende más rápido cuando la activas y la desactivas. En Scale Composer el contenedor es un único max-width global, y puede desactivarse por completo: el caso de la maquetación fluida. Desactívalo y observa cómo la rejilla de escritorio se apodera de toda la vista previa: las columnas se estiran, el total de la rejilla persigue al viewport y los tramos de texto que estaban dimensionados para la lectura se pasan de su banda: desactiva el contenedor y observa cómo la rejilla se vuelve fluida.