Sentinel: Your Web-Performance Watchman

Introducing csswizardry-grids

Written by on CSS Wizardry.

Table of Contents
  1. Featured case study: NHS

Yesterday I wrote Responsive grid systems; a solution?, all about the principles behind creating the fluid grid system in inuit.css. That post deals with the thoughts, reasonings and theory behind how such a grid system works. This post is csswizardry-grids’ elevator pitch:

csswizardry-grids is a simple, fluid, nestable, flexible, Sass-based, responsive grid system. It allows you to rapidly construct fully responsive websites whilst abstracting all the layout information away from your components, as all good grid systems should.

N.B. I am a huge proponent of the extra divs style grid systems which keep your page’s layout and content totally separated. To find out more as to why, I recommend watching my Breaking Good Habits talk from Front-Trends, 2012.

csswizardry-grids allows you to configure your gutters and your own breakpoints to cater to layouts for palm-based, lap-based, portable and stationary devices. It works on the principle of percentages, rather than absolute columns, meaning that there are no confusing .span-6 classes that behave like .span-12 ones at smaller sizes.

Featured case study: NHS

How I helped the NHS rapidly build a brand new product.

Read case study…

The grids are also fully (infinitely) nestable, meaning you can apply sizing to your sub-components as well as to your page-level layout. Furthermore, csswizardry-grids’ implementation is left entirely up to you, with two options:

  1. To use ‘solid’ classes which are basically just traditional CSS classes like .one-half. These need applying directly in your markup, e.g.: <div class="grid__item one-whole desk-one-half">.
  2. To use Sass’ silent classes which means that the classes sit ‘invisibly’ in your Sass and never get compiled to CSS until they are actually, explicitly used. You can turn this on via the $use-silent-classes variable.

Implementing silent classes means that your markup would now be something like:

<div class="content">

And your CSS:

    @extend %grid__item;
    @extend %one-whole;
    @extend %desk-one-half;

Each method has its merits, and it is left entirely to you to decide which you’d prefer to use.

So there you have csswizardry-grids, a micro-library for creating fully responsive layouts from breakpoints of your choosing.

Did this help? We can do way more!

Hi there, I’m Harry Roberts. I am an award-winning Consultant Web Performance Engineer, designer, developer, writer, and speaker from the UK. I write, Tweet, speak, and share code about measuring and improving site-speed. You should hire me.

You can now find me on Mastodon.

Suffering? Fix It Fast!


  • inuitcss
  • ITCSS – coming soon…
  • CSS Guidelines

Next Appearance

  • Talk & Workshop

    WebExpo: Prague (Czech Republic), May 2024


I am available for hire to consult, advise, and develop with passionate product teams across the globe.

I specialise in large, product-based projects where performance, scalability, and maintainability are paramount.