The Rise of Ratio Grid Systems

A farewell to traditional CSS grid systems

Cory Simmons - @ccccory

Hi, my name is Cory Simmons

Why I got into ratio grids

I've been a freelance web-designer for several years. In that time I had a client for a few years that was... "picky" and indecisive.

He'd want a website with 3 columns, then he'd want to add another column, then another, then remove one, then add 3 more, then...... you get the picture.

I needed a way to quickly appease him. I needed a more powerful grid system... traditional CSS grids weren't cutting it.

I put a plan into motion

I wanted a grid system where I could set my grid settings on the fly. For instance if I wanted a grid that was broken up into thirds in one area and sevenths in a section slightly further down the page, I could do that.

Something in my bones told me that preprocessors could totally do this but I was too stupid to figure out the formula.

I obsessed over this.

I stopped communicating with people. I stopped working specifically to concentrate on this. I fell behind on all my bills and almost ended up homeless.

No joke. Math is weird.

Good morning

I finally gave up on it and went back to traditional CSS grids. I went to sleep so depressed.

The very next morning I woke up to find this huge Pull Request from a guy named Mitchell Coote (L.A. Noire, Saints Row animator, awesome guy) who had solved the dilemma by borrowing bits and pieces from other grid projects.

Equipped

Now that I had a badass grid system I was able to complete work in a fraction of the time, catch up on bills, and spend more time with family and friends.

But enough about my personal experience. Let's bash things!

What is a traditional CSS grid?

Any grid distributed as pure CSS.

Examples

Pros and Cons of pure CSS grids?

Pros

Cons

Why CSS grids suck

* I know what OOCSS is. It still looks like markup spaghetti and is overkill for most sites. Not to mention, you don't have to forfeit OOCSS for preprocessor solutions.

An actual example straight from the docs

Bootstrap
<div class="col-sm-6 col-md-5 col-md-offset-2 col-lg-6 col-lg-offset-0">

Foundation
<div class="small-5 small-push-7 medium-7 medium-push-5 columns">

"But Bootstrap and Foundation offer semantic mixins for their grids"

After some editing and copying & pasting you can use Bootstrap's mixins for your grids, but they're still not very flexible (you have to make a new mixin every time you want to change the number of grid columns).

Indeed Foundation offers a great little Sass-based grid toolkit that mimics Bourbon Neat. It's not as flexible as some of the ratio grids out there, but kudos to the Foundation team.

Also, use these. If you're already using them and everything is good for you, then continuing using them!

Maybe it's time to up your grid game

Grids are the most important part of any UI toolkit. They offer a way to lay out your entire website in a neat way and we use them on every single site we ever build.

Why aren't we making it a point to spend some time exploring grid systems?

If any part of our workflow deserves special attention, it's grids.

True flexibility

What if we could define our grids on the fly? What if we didn't need no stinkin' .row classes anymore?

What would our markup look like?

Shame-filled self-plug

There are amazing grid systems out there. I'm only using "my grid" as an example because I'm so familiar with it.

A ratio grid called Jeet

Jeet is a grid system that works with Sass or Stylus.

Traditional Bootstrap Markup

<div class="container-fluid gallery">
  <div class="row">
    <div class="col-xs-6 col-md-4">item</div>
    <div class="col-xs-6 col-md-4">item</div>
  </div>
</div>

Jeet Markup

<section class="gallery">
  <div>item</div>
  <div>item</div>
</section>

Remember why CSS was invented

To separate markup from style. Let's do that.

Jeet Style

.gallery
  cf()
  > div
    col(1/2)
    +above(medium)
      col(1/3)

Flexibility

Let's say we want our grid to be a row of 4 items. It's as easy as changing one value.

.gallery
  cf()
  > div
    col(1/4)

In traditional CSS grids we'd have to go back over every instance of that class in our markup and replace it.

That's not all!

Let's say we have a 3 column grid at the top of our page for something like a masthead, and somewhere below that we need a 5 column grid for something like services.

There's no way to do this with traditional CSS grids without upping the original amount of columns to 15 - which will screw up all your existing markup.

With a ratio grid...

.masthead
  cf()
  > div
    col(1/3)

.services
  cf()
  > div
    col(1/5)

But wait, there's more! Padding-based grids are icky

Bootstrap and Foundation use padding-based columns. This is a grid solution where you can drop in as many elements as you'd like and they adhere to the grid beautifully. The downside is, you don't have real empty space between elements. It's all padding. This means if you want to change the background for elements in your grid, you need to create a new element inside every single column you'd like to have it's own background color - you can't just change the column's background color.

Foundation tries to cheat with their "Block Grid", but if you change the actual column elements (the <li>'s) it still paints the entire column's background so you still need to nest an element inside of it.

In their defense

These are the best grids you can make with CSS only *, and they are trying to market their frameworks to the biggest possible audience. So it makes sense for padding-based CSS only grids to exist.

* cough Flexbox cough

We're not babies

CSS-only grids will always exist to cater to people who don't use preprocessors, but maybe we should take our grid-destiny in our own hands and simply swap out their grids for preprocessor based ones.

The Ratio Grids!

Replacing Bootstrap's grid with a Ratio Grid

  1. Stop using Bootstrap grid classes
  2. Use a ratio grid for all your column needs
  3. Some things won't work or need to be set to width: 100%

Example

Adios billion classes and extra elements in markup. Hola real columns.

In conclusion

Sidenote

Literally every single developer I've ever worked with on a project has used Bootstrap and has screwed up the grid markup. And every single designer who has switched from traditional CSS grids to ratio grids has been really happy with the switch.

I highly suggest you try out all these grid systems and pick your favorite

Completely replace your CSS grid system with a preprocessor grid system in less than a week and see drastic, amazing changes to your workflow and development time instantly.

I'm Cory Simmons

I work for TutsPlus making tutorials and courses. I've written for Packt Publishing and CSS Tricks. I present at conferences like this one. I worked on a site that won a Site of the Day Awwward. I made and maintain the most popular Stylus library with over 1700 GitHub Stars - Jeet.

@ccccory (4 c's)

Subscribe to TutsPlus to learn more about Jeet and much more

Thanks to MojoTech for sponsoring my trip

MojoTech is a web-development company in beautiful Providence, RI. They work with a plethora of great tools and frameworks, and they're currently hiring for all kinds of positions so if you're looking for a job check out their site at MojoTech.com