Calc() Grids Are the Best Grids

I think we can all agree that fixed grids have gone the way of the dinosaur in favor of fluid grids, but there were always things that bugged me about fluid grids. For instance, there’s no way to have a gutter on the top and bottom that is the same size as a gutter on the left and right. Seriously, try it.

And there’s no way to nest indefinitely without passing some sort of context along with your spacing. For instance, in Jeet, you have to type column(1/3 1/2)where 1/2 is the size of the containing element. This gets pretty hairy when you’ve nested down three or four times and you have declarations that look likecolumn(1/4 1/3 1/2 1/2). Yuck. It’s not just Jeet either, every preprocessor-based grid system has this problem.

And Bootstrap? Don’t get me started on how many extra elements you need in your markup just to make your grid system work–it’s error prone if nothing else. Or the fact that you need even more elements in your markup if you’re going to set background colors on elements. Here’s an example of that little problem in the form of a gallery.

Argh! Even Flexbox doesn’t seem to offer anything new other than convenient way to vertically center things.

After that whirlwind tour of what’s wrong with grids today, what’s a grid obsessor supposed to do?

Wait–What’s This Shiny Thing? Calc()?

We can use calc() within our CSS, so what does it do?

“With calc(), you can perform calculations to determine CSS property values.” - MDN

Not only that, but we can combine units with calc! That means if we want a grid to have four columns per row with a 20px gutter between them, we can write a combination of percentage and pixel values like width: calc(25% - 20px). How fantastic is that?

Example

Here’s some markup–seven kitten images within a containing section:

1 2 3 4 5 6 7 8 9

<section>   <img src="http://placekitten.com/404/303">   <img src="http://placekitten.com/404/303">   <img src="http://placekitten.com/404/303">   <img src="http://placekitten.com/404/303">   <img src="http://placekitten.com/404/303">   <img src="http://placekitten.com/404/303">   <img src="http://placekitten.com/404/303"> </section>

Then we apply some styling to the images:

1 2 3 4 5

img {   float: left;   width: calc(25% - 20px);   margin: 10px; }

This makes sure that each image is exactly 25% the width of its parent, minus 20px from which allows for our gutter left and right. A margin of 10px all around then places the image perfectly centered within the “column”.

Four columns of kittens

Notice how the spacing on the top and bottom is the same as the spacing on the left and right? Beautiful.

Expressed Another Way

Let’s abstract this just a bit more for those of us who would rather display the calculation differently: width: calc(100% * 1/4 - 20px);

Again, this gives us four perfect columns with 20px gutter. We can also use media queries to alter the number of columns depending on the viewport width:

01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20

img {   float: left;   margin: 10px;   width: calc(100% * 1 / 4 - 20px); } @media (max-width: 900px) {   img {     width: calc(100% * 1 / 3 - 20px);   } } @media (max-width: 600px) {   img {     width: calc(100% * 1 / 2 - 20px);   } } @media (max-width: 400px) {   img {     width: calc(100% - 20px);   } }

Years of obsession completely wiped away by this beautiful little CSS rule. Farewell grid systems. Hello calc.

Browser Support

It wouldn’t be fair to round off this quick tutorial without letting you know where and when you can use calc(). The usual suspects are playing catch-up (IE9 is nearly there, but ignores calc() when display:table is used). However, looking forwards this is a very powerful CSS tool.

Take a look at http://caniuse.com/#feat=calc for more details.