New Grid-Breaking Hotness

admin December 23, 2020 inspiration learn perspectives post jumbotron

Generally, if you’d like to rock a 100% full-width (viewport) image from inside a container, additional markup would be required to make it happen.

You’d have to close the container, add your 100% image, then reopen the container. Rinse repeat for each instance.

That’s all well and good, but this becomes a bit of an issue when creating blog post templates / layouts in a CMS like WordPress. Sure, you can write some custom functions to wrap images with the required markup, but honestly, that’s a pain in the ass. Especially if you only want some images or elements to go full-width.

Of course, you could write a js solution to calculate the distances and offsets, then recalc on resize, but that’s also kinda grimey.

No worries playas… there’s a better way – free from extra markup, functions, helpers, or js retardery.

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.

Partial grid-breaking patterns from The Great Discontent and Medium
A full width grid-break as seen on Medium

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.

/*---------------------------------   
--Row/Container
-----------------------------------*/    
.row{  
  width: 60%;
  margin-left: auto;
  margin-right: auto;
}

/*---------------------------------   
--Grid Breaker
-----------------------------------*/
.gridbreak-full{
  width: 100vw;
  max-width: 100vw;
  margin-left: -20vw;
}

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.

Other posts

Responsive Brands: Part 01

Read Full Article work
Prev

Sane Namespacing And Object-Oriented Development With Javascript

Read Full Article work
Next