Learn CSS: The Complete Guide
We've built a complete guide to help you learn CSS, whether you're just getting started with the basics or you want to explore more advanced CSS.
Grid Systems
Hi. My name is Cory. I have a bit of an obsession. I’ve been addicted to grid systems for years now. In fact, I helped make a pretty popular one called Jeet. I’ve always loved the math involved with spacing things out appropriately.
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 like column(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 |
<section>
|
2 |
<img src="http://placekitten.com/404/303"> |
3 |
<img src="http://placekitten.com/404/303"> |
4 |
<img src="http://placekitten.com/404/303"> |
5 |
<img src="http://placekitten.com/404/303"> |
6 |
<img src="http://placekitten.com/404/303"> |
7 |
<img src="http://placekitten.com/404/303"> |
8 |
<img src="http://placekitten.com/404/303"> |
9 |
</section>
|
Then we apply some styling to the images:
1 |
img { |
2 |
float: left; |
3 |
width: calc(25% - 20px); |
4 |
margin: 10px; |
5 |
}
|
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”.
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:
1 |
img { |
2 |
float: left; |
3 |
margin: 10px; |
4 |
width: calc(100% * 1 / 4 - 20px); |
5 |
}
|
6 |
@media (max-width: 900px) { |
7 |
img { |
8 |
width: calc(100% * 1 / 3 - 20px); |
9 |
}
|
10 |
}
|
11 |
@media (max-width: 600px) { |
12 |
img { |
13 |
width: calc(100% * 1 / 2 - 20px); |
14 |
}
|
15 |
}
|
16 |
@media (max-width: 400px) { |
17 |
img { |
18 |
width: calc(100% - 20px); |
19 |
}
|
20 |
}
|
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.
