Building Better Grids: CSS Grid Systems to Know About

Grids are an essential tool for designers. A well-designed grid system can make all the difference to your design, giving you a solid structure on which to flaunt your creativity.

Historically, on the web, designing and building grids hasn’t always been easy. From the bad old days of using tables for layout to the more recent (but still cumbersome) methods of floats and clearfixes in CSS, web designers and developers have had to find innovative workarounds in the absence of a better solution for creating grids for the web.

I’m pleased to say all that is rapidly changing, and there is now a wealth of methods to choose from for constructing your grids. But how do you know which to choose? In this article I’ll dive into some of the existing options, and also give you a taste of how we can expect to be creating layouts in the future.

Fluid grids are one of the central tenets of responsive web design, so here I’ll be focusing on the tools and methods that enable us to create fluid and percentage-base layouts with CSS grid systems.

CSS Frameworks

Using a CSS framework is one of the quickest and easiest ways to create responsive layouts with minimal coding. Of the many frameworks on offer, Bootstrap and Foundation are probably the most popular. The grid systems for these frameworks work in more or less the same way: just add the framework’s pre-defined classes to your HTML. An example of markup using Bootstrap:

<div class="row">
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>

As Bootstrap uses a 12-column grid, this example would give you three items that are 6 columns wide (or 50% of the row) at small sizes and 4 columns wide (or one third of the width of the row) at medium (or tablet) breakpoints.

Bootstrap homepage screenshot

Pros:

  • Quick and easy to set up and use, so great for prototyping.
  • Bootstrap 4 (currently in alpha) and Foundation 6 both support (optional) flexbox grids, providing users with more powerful layout features.
  • Both use Sass, the most popular preprocessor – and give you the option of either using Sass or vanilla CSS in your code.
  • Great documentation and community support – they are widely used, and you can find plenty of articles and tutorials on these well-known frameworks online. Bootstrap and Foundation and popular and well-maintained, meaning they are reliable and any bugs in new releases likely to be fixed quickly.

Cons:

  • Performance matters on the increasingly mobile web, and Bootstrap has been criticised for being bloated, which is a big reason you might hesitate to use it in production. Why add all that bloat when all you really need is a grid? There are ways of stripping out all that unused CSS, however: UnCSS is one such method. Alternatively, Skeleton is another framework that has a similar grid system (albeit less powerful) but none of the bloat of Bootstrap’s extra components.
  • Personally I find these frameworks can be a bit rigid for my liking. Bootstrap and Foundation use common, predefined breakpoints, but in practice those breakpoints might not necessarily be right for your project. Equally, in practice you might not always want a 12-column grid. If you want a more flexible layout then, at least with Bootstrap, you’re out of luck.
  • Many people say all Bootstrap sites look like, well, Bootstrap sites, and there’s some truth to that. If you want to build on top of the framework’s already-styled components then great, but unfortunately it can be more work to strip away the styles you don’t want.
  • If your layout is fairly complex you can end up writing a crazy number of classes on any particular component, which is not always great for the readability of your code.
  • LESS is no longer supported as a preprocessor in Bootstrap 4, so if you’re used to using that you might hesitate to make the switch.

Ultimately, if all you want is a grid system, Bootstrap and Foundation are probably a bit overkill. Let’s look at some other options.

Sass Grid Systems

Sass is the most popular CSS preprocessor, and a plethora of grid systems have popped up over the past couple of years that take advantage of Sass’s mixins and functions. My personal favourite is Susy, which has excellent documentation and community support. Bourbon Neat is another popular Sass grid system. Both have a few features that the other doesn’t have, so it’s worth taking a look at both of them and seeing what works for you.

Unlike traditional frameworks, these grid systems are used purely in your Sass files, they don’t touch the HTML. This means you don’t need to use specified grid classes in the HTML – simply include the mixin in your Sass. An example using Susy to create an article section that spans 8 out of 12 columns, with a sidebar that spans 4 columns:

/* SCSS */

.article {
	@include span(8 of 12);
}

.sidebar {
	@include span(4 of 12);
}

Sass homepage screenshot

Pros:

  • Performant – only the CSS you actually use is compiled, you’re not shipping a ton of redundant CSS.
  • Just a grid system – unlike other frameworks, there are no pre-styled components, so there is no need to overwrite existing styling.
  • Only use what you need – both Susy and Neat have some nice additional features, but you don’t have to use them if you just want to keep it simple.
  • Super flexible – you can set the number of columns for different breakpoints (for example, 12 columns at desktop sizes, 4 columns at mobile sizes), and define those breakpoints however and wherever you like.
  • The compiled CSS is simply floats and margins, so browser support is not an issue.
  • Good documentation, with a growing community.

Cons:

  • It’s unlikely you’ll find a Sass grid system that will cater for every possible grid scenario, so you might still find yourself having to do some customisation.
  • At the time of writing, Susy and Bourbon don’t natively support flexbox for layouts. Flexbox still requires fallbacks for older browsers, so a grid system that builds this in would perhaps be an ideal one-size-fits-all solution. Happily, Susy is pretty extendable, and you can tailor it for your needs! I wrote an article on using flexbox with Susy a while back, and a few people have started talking about ways to use Susy with flexbox. Rumour has it that the next release of Susy will include, if not flexbox support out-of-the-box, at least some of the tools to make this easier.
  • If you’re using a lot of mixins, your Sass compile times can get pretty slow with Ruby Sass. For this reason I would recommend using Libsass, which is a lot faster.
  • Another reason not to litter your Sass with mixins is readability and maintainability. Is it clear to all developers working on a project what those mixins are doing? Some would argue that too much reliance on mixins creates excessive abstraction from your compiled CSS, which can result in unwittingly writing far larger (and therefore less performant) CSS files than you otherwise would have. Of course, this is an issue for Sass in general, not just grid systems, but it’s certainly worth bearing in mind when considering your approach to grids.

Custom Grids with Flexbox

The Flexible Box Layout Module (flexbox) has been eagerly anticipated by web developers eager to move away from floats, and, finally, is now supported by modern browsers. Flexbox solves many common layout problems we in the web community have been lamenting for so long, such as vertical centring and equal-height columns. It’s an extremely efficient method for creating bespoke, custom grids.

Here’s how we might create simple layout, with an article and sidebar layout inside a container:

/* CSS */

.container {
	display: flex;
}

.article {
	flex: 3 0 0;
}

.sidebar {
	flex: 1 0 0;
}

The above example uses the flex-grow property, giving us an article 3 out of 4 columns wide and a sidebar of 1 column. However, the chances are your grid system will be a little more complex than that! In this article, Heydon Pickering outlines a possible method for creating responsive grids with flexbox.

Pros:

  • A hugely powerful tool – once you give it a try you’ll never want to go back to floats!
    Works alongside many of the tools we’ve previously mentioned, but not dependent on any of them. You don’t need to use Sass or any other preprocessor.
  • By using flexbox, which is native CSS after all, you’re not adding additional dependencies to your project, and therefore helping to keep your codebase lightweight and performant.
  • It’s entirely CSS – like the Sass grid systems outlined above, it’s independent of your HTML.

Cons:

  • Unlike the grid systems and frameworks I’ve talked about, flexbox just provides the tools for your layout, it doesn’t do the maths for you. You have to find some other way of calculating your column and gutter widths if you want to build it into a flexible grid system.
  • Flexbox is now supported in all modern browsers (although buggy in IE11), but you’ll need a fallback if you want to support older browsers, which is highly likely.
  • Initially it can be difficult to remember all the various properties and what they do. Do you want justify-content, align-items or align-content? Flex-direction, flex-wrap or flex-basis? I use Joni Trythall’s flexbox cheatsheet as a handy quick reference guide.
  • Because flexbox is so powerful, many designers and developers have jumped straight into it as a layout tool. However, some argue that flexbox is more suitable for small components, and we shouldn’t be using it for page-wide grid systems. In reality though, as a tool it’s currently the best thing we have for achieving many of the things we want to achieve with layout on the web, and people are going to adopt it regardless of whether it was intended that way – just as they adopted floats, which were equally not intended for layout.

The Future: Grid Layout Module

The Grid Layout Module, currently a W3C working draft, picks up the slack where flexbox left off, and will most likely be the native CSS grid solution we’ve all dreamed of! It’s currently implemented behind a flag in Chrome and Firefox, and (amazingly!) IE has partial support. Rachel Andrew has been doing some excellent work around the Grid Layout Module, and provides some resources for getting up to speed on her website.

With Grid, you’ll be able to define your web page grid as cells, rows, columns and gutters (much like a table) and fit your content in wherever you like (irrespective of source order). Compared to Grid, everything else feels like a hack. I’ll be interested to see some of the grid systems that will inevitably be built with this tool once it’s in widespread use.

It’s hard to define the pros and cons without seeing what happens when it’s finally implemented, but here are a few:

Pros:

  • A native CSS module, designed for large-scale page layouts, rather than small components.
  • No dependencies, all CSS.

Cons

  • It’ll likely be a while before we see widespread browser support, and once we do we’ll need fallbacks for some time.
  • As with any new tool, there is always potential for both creativity and misuse. I wonder if we’ll see smaller components being built with rigid grids and a return to more boxy layouts on the web.

Conclusion

It is impossible to advocate a clear winner in CSS layout methodologies, as it entirely depends on your project and the way you (or your team) like to work. However, there are some clear criteria to consider when picking a methodology to suit you:

  • Is it widely used, tested and/or maintained?
  • Does it have good browser support?
  • How good is the documentation and community around it?
  • Does it require dependencies?
  • Is it performant?
  • Does it scale?
  • How simple is it for a new member of the team to understand?

I hope this article has provided you with some of the tools to choose your next grid system wisely.

Start Your Own Freelance Business!

Learn how I went from a corporate employee to owning my own freelance business and blog. Sign up for my email newsletter and get a FREE copy of my Ebook plus a coupon for 10% off your first billing cycle on any Vandelay Premier plan!

Looking for hosting? WPEngine offers secure managed WordPress hosting. You’ll get expert WordPress support, automatic backups, and caching for fast page loads.