Wait… What’s a Grid-Break Pattern?

Oh, right. Before we get into a solution, we should probably better define the issue. When I say “grid-breaking” pattern, I’m referring to a method of upping the sophistication of your layout game but having certain elements extend outside their parent container. Well suited for blog post designs, a number of content types can benefit form the visual interest this pattern creates – blockquotes, images, captions, etc.

Variations of the pattern include extending content beyond it’s container, completely (full viewport), partially (say 15%), and completely on mobile only. Medium and The Great Discontent both leverage grid-breaks in a masterful manner.

However, take a peak at the code and you’ll see that instead of a single container class, both sites accomplish their grid-break by wrapping all content into a series of full width blocks. While this certainly does the trick, it also cooks up a steamy bowl of div soup. Wouldn’t it be nice to use a simple, pure css approach that keeps your markup to a minimum?

 

Hello Viewport Units

Good news. With viewport units, namely viewport width (vw), and a single negative margin declaration, this full-width grid breaking pattern is achievable via a few lines of painless css. Sidebar: despite many a front-end’s affirmation otherwise, negative margins are not hacky, nor bad code. They exist within the box-modal for a reason. John Imbong’s 2009 Smashing Magazine article on a few use cases for negative margins still holds merit today.

The Run Down

So let’s say your centered container is 60% in width. That leaves you with 40% of available space, or a distance of 20% on each side of the container. To make our grid-breaking element go full width, just:

1. Apply a width & max-width of 100vw.
2. Add a margin-left of 20vw to account for the 20% distance outside the container (60 + 20 + 20 = 100).

Boom. We’re done son! That’s it.

Pretty Sweet

I know right? No weird hacks, no overflows to hide. No php functions or rails helpers in your CMS. No custom WordPress QTags stuffs. No JS nonsense. No hiding overflow to prevent horizontal scrolling. Just a nice full-width, grid-breaking element.