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. sdfsdfs

[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.

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;    }
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
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.

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;    }
Deep Dive · 8 min read
Understanding CSS Grid: The Complete Guide to Modern Layouts
J
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 →
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.

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;
}
The Power of Named Lines
Tip: Use ch units for readable line width
← See diagram
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.