Secciones a sangre dentro de un contenedor

Un pulso habitual en maquetación: la página vive dentro de un contenedor de 1200px —como debe ser, por las razones de ancho de lectura por las que existen los contenedores — y entonces el diseño pide un hero con un fondo que va de borde a borde del viewport. La solución de novato es quitar el contenedor de esa sección y reconstruir su alineación interna a mano. Tres secciones después, la página tiene cuatro ideas distintas sobre dónde está su borde izquierdo.

Una sección a sangre es aquella cuyo fondo escapa del contenedor mientras su contenido permanece dentro —y las implementaciones limpias comparten todas esa división: la banda de color, la imagen o el vídeo ocupan todo el ancho del viewport, pero el texto y los controles que van encima siguen alineándose con la misma rejilla que cualquier otra sección. La página conserva una sola columna vertebral; solo la pintura se desborda. Este artículo cubre los dos patrones modernos y cuándo encaja cada uno, un rincón de nuestra guía de rejilla de maquetación.

¿Por qué los fondos escapan pero el contenido no debería?

Porque cada uno cumple una función distinta. Un fondo de ancho completo es atmósfera —señala un cambio de sección, lleva una foto, le da a una banda de testimonios su propia temperatura—. La atmósfera gana con el tamaño y no pierde nada a 2560px de ancho. El contenido es leer y actuar —y todo lo que el contenedor protege (longitud de línea, distancia de interacción, alineación con las secciones de arriba y de abajo) sigue aplicándose dentro de la banda. El ojo también lee la alineación como estructura: cuando el titular del hero empieza en la misma posición horizontal que el texto del artículo que hay debajo, la página se siente como una sola cosa. Una sección a sangre cuyo contenido también sangra rompe esa columna vertebral —la maquetación se lee como pósteres apilados en vez de como una página.

Patrón 1: el contenedor anidado

La estructura más simple: el envoltorio de la sección es fluido y el contenedor se mueve dentro de él:

<section class="band">           <!-- fluido, lleva el fondo -->
  <div class="grid-container">   <!-- el mismo contenedor de siempre -->
    <h2>Edge-to-edge background, on-grid content</h2>
  </div>
</section>

.band {
  background: var(--color-surface-accent);
  /* sin max-width — la banda es tan ancha como la página */
}

Cada sección a sangre es un envoltorio más el contenedor estándar —el mismo .grid-container (max-width, márgenes automáticos, padding-inline) que genera la exportación de CSS de rejilla de Scale Composer —. Nada del contenedor cambia; simplemente se sitúa un nivel más adentro allí donde una banda necesita pintura detrás. La fuerza de este patrón es su torpeza: funciona en cualquier sistema de maquetación, no necesita trucos de rejilla y el marcado dice exactamente lo que ocurre.

Patrón 2: la rejilla breakout

Cuando toda la página es una sola rejilla CSS, una estructura de tres pistas permite que las secciones se salgan por elemento en vez de por envoltorio:

.page {
  display: grid;
  grid-template-columns:
    [full-start] minmax(var(--grid-margin), 1fr)
    [content-start] min(var(--container), 100% - 2 * var(--grid-margin))
    [content-end] minmax(var(--grid-margin), 1fr)
    [full-end];
}
.page > * { grid-column: content; }   /* por defecto: todo sobre la rejilla */
.page > .full-bleed { grid-column: full; }  /* excepción: de borde a borde */

La pista central es el contenedor (limitado a --container, nunca más ancho que el viewport menos los márgenes); las pistas exteriores absorben lo que sobra igual que harían los márgenes automáticos. Cualquier hijo reclama el ancho completo con una sola clase y —lo elegante— un hijo a sangre puede ser a su vez una rejilla cuya pista central se realinea con la columna de contenido, de modo que el texto sobre una banda a sangre vuelve a caer sobre la columna vertebral.

Elige según la forma de la página: páginas mayormente contenidas con alguna banda ocasional → el contenedor anidado (patrón 1) mantiene todo evidente; maquetaciones editoriales donde muchos elementos alternan de ancho (imágenes a sangre, texto contenido) → la rejilla breakout (patrón 2) rentabiliza su astucia.

¿Qué aspecto tienen los números?

Los tokens que impulsan ambos patrones vienen del sistema de rejilla: el tope del contenedor y los márgenes por breakpoint. Con los valores por defecto de Scale Composer —contenedor 1200px, margen de escritorio 66px— un viewport de 1440px le da a la banda 1440px de pintura mientras su contenido abarca los 1188px que la rejilla suma en realidad, con (1440 − 1200) / 2 + el propio padding del contenedor como sangrado visual. Reduce al nivel de tableta y el token de margen baja a 29px, la banda sigue sangrando y el borde del contenido sigue la rejilla de ese nivel.

Abre el contenedor y sus márgenes en la vista de rejilla —el tope de 1200px con la previsualización de 1440px alrededor: la zona entre el borde del contenedor y el viewport es exactamente donde vive un fondo a sangre.

¿Qué elementos se ganan el sangrado?

Menos de los que lo reciben. El sangrado es énfasis, y el énfasis se agota —la misma lógica de presupuesto que cualquier otra moneda de atención en un sistema de diseño. Los que suelen ganárselo: el hero (uno por página), imágenes y vídeo de ancho completo, bandas de testimonios o de CTA que marcan cambios de acto en una página larga, los pies de página. Los que no suelen ganárselo: el contenido de cuerpo (nunca), las tarjetas y las tablas (se leen peor anchas), cualquier cosa a mitad de argumento —un sangrado interrumpe, e interrumpir en mitad de un flujo de lectura cuesta más de lo que paga el dramatismo.

Dos advertencias mecánicas. El desbordamiento horizontal es el fallo clásico: un elemento a sangre más ancho que el viewport (un truco de margen negativo, un width: 100vw olvidado que ignora la barra de desplazamiento) le da a toda la página un scroll lateral —mejor los patrones de rejilla de arriba, que no pueden desbordarse por construcción. Y la protección del texto: el contenido sobre sangrados fotográficos sigue necesitando sus mínimos de contraste; un velo o una caja de contenido sólida bajo el texto es parte del patrón, no un extra opcional.

Lee tus propios márgenes

La zona de sangrado es una cantidad derivada —viewport menos contenedor, dividido en dos— y cambia en cada breakpoint. Recorre los niveles y observa cómo cambian los tokens de margen —16px en móvil (donde a sangre apenas se distingue de contenido), 29px en tableta, 66px en escritorio, donde la banda por fin tiene espacio para leerse como una banda. Si tu diseño se apoya en el dramatismo del sangrado, este es el número que decide cuánto dramatismo puede entregar de verdad cada nivel.