Content Grid

Description

.bp-content-grid implements the Full-Bleed Layout technique — a modern CSS Grid pattern where the grid itself replaces the traditional centered container. Instead of wrapping content in a .container div, every element on the page is a direct child of the grid, and named lines control how wide each child can grow.

Five zones are available. Children land in the content zone by default. Three utility classes opt them into wider zones.

The grid is fully recursive: a full-width child inherits the parent column definition, so its own children can use any zone too.

Inspiration

This Full-Bleed Layout implementation is inspired by Kevin Powell’s approach to replacing container wrappers with named CSS grid lines. His CodePen demo — Using grid instead of containers/wrappers — is the direct reference for the named-line structure used here.

Zones

Zone	Class	Default max-width	Uso típico
content	(default, no class needed)	72rem / 1152px	Texto, prosa, formularios
popout	.popout	60rem / 960px	Citas, CTAs, elementos destacados de texto
breakout	.breakout	90rem / 1440px	Grillas de cards, imágenes de portada, video
full-width	.full-width	100% del viewport	Fondos, secciones inmersivas de color extremo a extremo

Usage

Five zones

Content (default)

Popout zone

Breakout zone

Full-width zone

Back to content

<div class="bp-content-grid" style="--content-max-width: 20rem; --popout-max-width: 26rem; --breakout-max-width: 34rem; gap: 0.5rem">
<div style="background:var(--bp-color-brand-subtle);color:var(--bp-color-brand);padding:0.75rem 1rem;border-radius:0.5rem;font-size:0.8rem;font-weight:600">
  Content (default)
</div>
<div class="popout" style="background:var(--bp-color-bg-subtle);padding:0.75rem 1rem;border-radius:0.5rem;font-size:0.8rem;font-weight:600;border:1px solid var(--bp-color-border)">
  Popout zone
</div>
<div class="breakout" style="background:var(--bp-color-bg-elevated);padding:0.75rem 1rem;border-radius:0.5rem;font-size:0.8rem;font-weight:600;border:1px solid var(--bp-color-border)">
  Breakout zone
</div>
<div class="full-width" style="background:var(--bp-color-bg-elevated);padding:0.75rem 1rem;font-size:0.8rem;font-weight:600;border-top:1px solid var(--bp-color-border);border-bottom:1px solid var(--bp-color-border)">
  Full-width zone
</div>
<div style="background:var(--bp-color-brand-subtle);color:var(--bp-color-brand);padding:0.75rem 1rem;border-radius:0.5rem;font-size:0.8rem;font-weight:600">
  Back to content
</div>
</div>

API pública

Variable	Default	Descripción
--padding-inline	clamp(1.25rem, 1vw + 1rem, 2rem)	Gutter fluido: 20px en móvil → 32px en pantallas grandes
--content-max-width	72rem (1152px)	Zona de prosa y texto — longitud de línea óptima
--popout-max-width	60rem (960px)	Zona intermedia para CTAs, citas y elementos destacados
--breakout-max-width	90rem (1440px)	Zona visual para grillas, imágenes y video

Customization example

Override the widths per section without touching global tokens:

<div class="bp-content-grid" style="--content-max-width: 60rem; --breakout-max-width: 80rem">
  <!-- children -->
</div>

---

How to add a new spacing zone

The grid has exactly three zones today: content, breakout, full-width. If you need a zone between two existing ones — for example a wide zone between content and breakout — follow these steps.

1 — Add a CSS custom property for the size

In tokens.css or directly on .bp-content-grid, define how wide the new zone is relative to the existing ones:

.bp-content-grid {
  --wide-max-width: 84rem; /* between content (72rem) and breakout (90rem) */
  --_wide-size: calc((var(--wide-max-width) - var(--_content-max-width)) / 2);
}

2 — Insert the named lines into grid-template-columns

Named lines must be declared in order, from outermost to innermost. Insert [wide-start] and [wide-end] around the new track:

grid-template-columns:
  [full-width-start]
  minmax(var(--_padding-inline), 1fr)
  [breakout-start]
  minmax(0, var(--_breakout-size))
  [wide-start] /* ← new */
  minmax(0, var(--_wide-size)) /* ← new */
  [content-start]
  min(100% - (var(--_padding-inline) * 2), var(--_content-max-width))
  [content-end]
  minmax(0, var(--_wide-size)) /* ← new */
  [wide-end] /* ← new */
  minmax(0, var(--_breakout-size))
  [breakout-end]
  minmax(var(--_padding-inline), 1fr)
  [full-width-end];

3 — Add the child selector rule

.bp-content-grid > .wide,
.full-width > .wide {
  grid-column: wide;
}

4 — Use it

<div class="bp-content-grid">
  <p>Content zone</p>
  <div class="wide">Wide zone — between content and breakout</div>
  <div class="breakout">Breakout zone</div>
  <div class="full-width">Full width</div>
</div>

Rules to follow when adding zones

1. Always add lines in pairs — [zone-start] and [zone-end], symmetric around the content column.
2. Order outer → inner — full-width > breakout > wide > content. Reversing breaks the named-line cascade.
3. Use calc() from an existing anchor — always derive new sizes from --_content-max-width or --_breakout-max-width so the grid stays consistent when those tokens change.
4. Add the recursive rule — always include .full-width > .your-zone alongside .bp-content-grid > .your-zone so zones work inside full-width sections too.
5. Expose a public token — --wide-max-width not --_wide-size. Keep the private calc internal.

Accesibilidad

The grid is purely visual layout — it has no semantic meaning. Use appropriate landmark elements (<main>, <section>, <aside>) inside it. The grid classes are presentation only.

Internals

• --_padding-inline — resolves from --padding-inline
• --_content-max-width — resolves from --content-max-width
• --_breakout-max-width — resolves from --breakout-max-width
• --_breakout-size — computed from the two max-width tokens, do not set directly