Ratio Grids – The Next Generation of Fluid Grids

I’ve recently caught up with some workshops from the New York Future of Web Development conference and was particularly taken with a talk by Cory Simmons, founder of the Jeet Grid System (http://jeet.gs/).

He highlighted the emergence of pre-processor based grid systems which allows us to create super fast bespoke grids using ratios with either SASS or Stylus. It takes the pain away from having to constantly calculate %’s for layout elements and by using the available formulas/mixins we could create a grid in as little as six characters.

Here’s an overview of the pros and cons of using Ratio Grids:

	Traditional Grid Systems	Ratio Grid Systems
Examples	960 Grid, Bootstrap, Foundation	Jeet, Bourbon Neat, Susy, Bootstrap (mixins), Flint
Pros	Easy to integrate.	Define grids on the fly We don’t need extra elements / row classes anymore Simple, if you need to change the grid it can be as simple as amending the ratio defined
Cons	Padding based Grids (extra elements required) Now Flexbox can offer a lot easier implementation Bigger CSS file sizes.More markup required. Classes are pre-defined and can be complicated/ alot of classes are redundant from the onset.	Needs SASS or Stylus

The aim of CSS was to separate the presentation layer away from the structural layer (HTML), however we moved into a time where we had to clutter our HTML with a lot of additional elements and classes, now we’re in a time when we can have pretty CSS and semantic HTML and create desired results in a fraction of the time.

I haven’t fully adopted any of the ratio grid frameworks yet, but i’m certainly having a lot of fun experimenting. Here’s a tutorial http://webdesign.tutsplus.com/courses/building-easy-responsive-layouts-with-jeet/lessons/what-is-jeet so that you can explore in more depth.