📄 Full-Bleed Article Layout

A sophisticated blog layout where body text is constrained to a readable column width, but selected elements (images, quotes, banners) "break out" to be wider — or even full viewport width. Built entirely with named grid lines.

[full-start][wide-start][content-start]grid-columnnamed lines

1. The Three Zones

The trick is defining named lines that create zones: content (readable text column), wide (wider, for feature images), and full (edge-to-edge). All elements default to the content column.

Live Demo

bleed

margin

content column

margin

bleed

📝 Body text — stays in content column

🖼️ Feature image — spans wide zone

📝 More body text

🌄 Full-bleed banner — edge to edge

CSS

.article {
  display: grid;
  grid-template-columns:
    [full-start]    1fr
    [wide-start]    2fr
    [content-start] 6fr [content-end]
    2fr             [wide-end]
    1fr             [full-end];
}

/* Default: text stays in content column */
.article > * { grid-column: content; }

/* Override for wider elements */
.wide      { grid-column: wide;    }
.full-bleed{ grid-column: full;    }

💡 The named lines use the -start/-end naming convention, which lets you use just the base name (e.g., grid-column: content) as shorthand for content-start / content-end.

2. Full Article Demo

A realistic blog article with the full-bleed technique. Every child element defaults to the content column — only the special elements are promoted to wide or full.

Live Demo

Deep Dive · 8 min read

Understanding CSS Grid: The Complete Guide to Modern Layouts

Jane Developer

May 26, 2026

⊞

"CSS Grid is the single biggest improvement to web layout since the web was invented."

— A very smart developer

Ready to master CSS Grid?

Browse all 15 topics in this guide

Start Learning →

CSS

.article {
  display: grid;
  grid-template-columns:
    [full-start]    minmax(1rem, 1fr)
    [wide-start]    minmax(0, 3rem)
    [content-start] min(65ch, 100%)
    [content-end]   minmax(0, 3rem)
    [wide-end]      minmax(1rem, 1fr)
    [full-end];
  row-gap: 2rem;
}

/* Everyone defaults to content zone */
.article > * { grid-column: content; }

/* Specific overrides */
.hero-image  { grid-column: wide;    }
.pull-quote  { grid-column: wide;    }
.full-banner { grid-column: full;    }

💡 min(65ch, 100%) for the content column ensures text is always at most 65 characters wide (optimal reading length) but shrinks on narrow screens. The 1fr outer columns ensure the full-bleed really reaches the edges.

3. Inline Callouts & Margin Notes

With the named-line grid, you can also add callouts that break INTO the margins — creating a margin note effect without any absolute positioning.

Live Demo

The Power of Named Lines

💡 Tip: Use ch units for readable line width

← See diagram

CSS

/* Right margin note */
.margin-note-right {
  grid-column: content-end / wide-end;
  font-size: 0.75rem;
  color: gray;
  padding-left: 1rem;
}

/* Left margin note */
.margin-note-left {
  grid-column: wide-start / content-start;
  text-align: right;
  padding-right: 1rem;
  /* Must place main text + note in same row */
}
.note-row {
  display: grid;
  grid-column: wide; /* span wide zone */
  grid-template-columns: subgrid;
}

💡 Margin notes require items in the same implicit row to overlap the content and margin zones. The subgrid technique makes this much easier by sharing the parent's column lines.