Josh W. Comeau avatar Josh W. Comeau

Full-Bleed Layout Using CSS Grid

Screenshot of “Full-Bleed Layout Using CSS Grid”

https://joshwcomeau.com/css/full-bleed/

Josh shows here beautifully[1] how to use CSS Grid to contain page elements' width and have some expand outside this containment.

As the web has evolved, I've discovered a new aspirational layout. It offers a fantastic user experience, especially for long-form text content like news articles or documentation. But, like its predecessor, it's been deceptively hard to achieve; most implementations require obscure hacks or counterintuitive tricks.

I recently discovered an elegant solution to this problem using CSS Grid. In this post, we'll learn how it works!

Same idea as Tyler Sticka in this previous link, but with line numbers instead of names. It shows how CSS Grid offers many ways to build layouts.

  1. Josh's site is really gorgeous, with many design details that make the experience really interactive, enjoyable and fun. ↩︎