CSS Grids for Beginners

I finally got to grips with CSS grids over the past couple of weeks. I’ve always felt a bit intimidated by them, the frameworks that are out there look so complicated, and none seem to come with basic instructions on how the grid actually works.

After a bit of research I found a couple of blog posts that have cleared up the confusion for me. Chris Coyer at CSS Tricks has a good post called Don’t Overthink it Grids in which he explains how CSS Grids work clearly and simply.

Then I found another post at Design Shack that explains how to roll your own grid, and provides a calculator that will do all the maths for you. It’s even responsive!

Putting the two together I wrote my own basic responsive CSS grid that has 12 columns with 2% margins between them. It’s very simple, but can be built on and adapted to how you want to use it.  Here it is:

.col img { width: 100%; height: auto; display: block;}

@media screen and (min-width: 570px )
{
.col {float: left; margin-right: 2%;}
.last {margin-right: 0; }

.colWidth1 {width: 6.5%;}
.colWidth2 {width: 15%;}
.colWidth3 {width: 23.5%;}
.colWidth4 {width: 32%}
.colWidth5 {width: 40.5%;}
.colWidth6 {width: 49%;}
.colWidth7 {width: 57.5%;}
.colWidth8 {width: 66%;}
.colWidth9 {width: 74.5%;}
.colWidth10 {width: 83%;}
.colWidth11 {width: 91.5%;}
.colWidth12 {width: 98%;}
}


To use it just combine columns that add up to a width of 12, and give the right column a class of ‘left’, like this (HTML5) example:


<section class="col colWidth9">
<p>Some content goes here</p>
</section>
<section class="col colWidth3 last">
<p>Some content goes here</p>
</section>

And don’t forget if you’re using media queries for ie8 or earlier you’ll need a bit of javascript help. I use respond.js.

It collapses to a single column at  540px. You might have to adjust this breakpoint to fit your own content. I’ve used it on one website and it worked fine, but in my current project I think the content is a bit too squashed.

By Helen Lindley — http://www.helenlindley.com, or follow me on Twitter @hellindley.