#115: Don’t Overthink It Grids

Even if the layout of a site is simple as a main content area on the left and a sidebar on the right, that's a grid. There are new layout methods in CSS that are getting closer to prime time (like flexbox and grid layout) that will be very great for grids, but for now, floats are still doing the job.

I see a new grid framework just about every week. I think this saturation of grid frameworks gives rise to the perception that grids are super complicated and it's impractical or a waste of time to create your own grid system. I don't think that's true.

In this screencast we build our own grid system with just a few lines of CSS. Demo on CodePen.

Running Time: 17:19

Comments

Nice screencast. I agree with the idea, the last few projects I’ve worked on, I quickly wrote my own grid instead of trying to pull in some other grid framework. They are quick and easy to create and easy to customize.

I don’t really mind that the naming becomes “wrong” at different breakpoints. At least on sites where a simple grid like this suffices (any site I’ve ever worked on). Maybe just document in the code what happens to each column size at different breakpoints.

I don’t really think it is that much of a issue that they actually have a different name than what they are doing in smaller screen’s. As long as you make it clear for other devs to work on it. For example as other people said with comments.

However if you do need a solution to this you could implement a feature bootstrap has (not completely but the idea is great), Basically what you do is make a few different classes and name them like this:

In this example you could say that the large class is for devices with a screen of > 800, medium > 600 or whatever you wan’t as breakpoints. If the screen drops below a certain point the smaller version would take over. So if you were to implement this inside a codepen you would get something like this:

In this example you see that as soon as the screen gets a smaller width then 600px it will change the 1-4 grid to a 2-4 grid. This will however seems kinda sloppy in your html since it would have a class (or multiple) that do nothing on a certain screen size.

Fwiw, my 2 main techniques for creating 2 simple columns are a bit different. I either:

float one box left and the other right. So the gutter between them is simply the result of the difference in width.
or make the second column a block formatting context. That way gutters can be created without fear of the box model – which makes the grid IE6/7 compatible.

The latter is what http://ez-css.org does. It’s light, simple, and work across the board.

A key point to your “Don’t Over Think Grid” is being able to use box-sizing: border-box;, which has decent support. Without box-sizing, though, I think that where a lot of complication comes in. You either need extra markup, or your widths can’t equal 100%, ete, etc.

Anyway, IE8 supports box-sizing, but IE7 does not (there is some major irony there, I hope it’s not lost on anyone). There is a polyfill for box-sizing, so I suggest trying that out if you still need to support IE7 but want to take Chris’ advice not overthink grds: https://github.com/Schepp/box-sizing-polyfill

I’ve always liked your take on grids… I just find the class names a bit un-semantic… Here’s my point.

Lets say for argument’s sake that you have a layout like in your home page with three columns, and a media query for a smaller size, that turns those three into 2 and then into a single column, then those grid names make no sense…

Hi Chris,
thanks for your videos it’s really good and useful.
I have an off-topic questions about this particular one. In previous video I was able to see code and screen pretty clear, but this one is too blurry. I can’t read code. Is it the video problem, my browser or my vision ( just kidding about last one) ?

Chris, enjoyed the screencast. Thank you. Grids have always given me a headache, so I’ve avoided them, at least until I stumbled across a cool little App in the App Store. It’s called BluePrint Builder (not real expensive, and no, I have nothing to do with the software developer other than as a user :-) and though it builds pages (with HTML, CSS, Grid Background, etc.) and validates the code, you can also use it without any of the grid stuff.

As you build a layout you can give the Divs semantic names and when you’re done and export files, you can delete all the grid-related stuff and you’re left with a nice CSS that’s easy to add to and the HTML is pretty clean. The developer has some nice screencasts, including one on how to eliminate the BluePrint grid stuff. It’s worth checking out.

after playing with so many grid systems, I’ve found the easiest and most stable, as I still need to cater to the donkey stable browser wise, has been a customised variation of the 960 grid system – combining fixed layouts at different breakpoints, and fluid variations in places. Something particularly useful with this approach is the use of the push and pull classes which allow me to easily reshuffle the order of content between single column mobile layouts and multi column layouts on larger screens.

While I am aware of its shortfalls, and I’m eager to start using a more ‘modern’ approach, I’m not 100% convinced yet.

Just wondering if anyone had found a solution to the problem associated with nesting div’s using Chris’ (simple & superb) code. Example; two 1-4 div’s nested withing a 1-2 div will almost produce the desired result; however when the padding is removed from the final nested div it is not distributed equally – resulting in the final div being slightly wider than the former.

I know the problem of nested fluid columns is well documented but every solution I find uses complex (compared to the intuitive code offered in the video) SASS or LESS mixins to calculate nested widths properly. I’ve tried encapsulation the nested div’s in a row and setting a negative margin not to mention a heap of other hacks but to no avail.

Chris’ code is the first fluid grid layout I’ve really felt I understood 100%, it’s just my layout really requires nesting functionality. I’ll stick at it and post a codepen if I win! For now I’ll be using some mixins I (kinda) understand… Sigh ;)

Your screen casts are amazing, can’t say how thankful I am of your generosity sharing all your knowledge.
Just a simple question: is there some way of making all columns equal height without having equal content and without using a fixed or minimum height property?
Thanks

Hi,
I really enjoyed the tutorial, but I have a question. I am redesigning my website. My site was always fluid, but I want to do a better job. However I don’t understand the difference between div ID and a div class. I made my own layout, but had to fix some sizes as I didn’t want one line of text 20ft long if you know what I mean. Ok in my site I am designing I have done it like this

So after watching your tutorial I am wondering if I should have been using classes all along. Can you tell me the advantage of class over a div ID. I also notice you have to put a . in front of a class name.

Seems I have a lot to learn.
PS this is the first video I have watched on this site, and the first time I have come here.

Any reason you don’t put your grid stuff in Sass instead of html classes? I’ve been trying this out on a couple recent projects and wondering if there’s a downside like performance to the upside of more semantic html?

Thanks Chris , we really need not to overthink many parts , Are we going to focus on SCSS ? I think I like to write a small CSS script and have it work with many browsers. But It’s hard to keep it small.

Hi Chris…thanks a ton for your video explaining your simple self-rolled grids. I’ve been rocking these for several sites now and agree it’s totally the way to go!

There is one issue that I’ve noticed however. If you aren’t wrapping a grid block in “grid-pad” and then you have say two columns, col-1-2, the two columns have noticeably uneven widths. In the video you said the math would only be off on uneven combinations but definitely with two 50% columns we have a big difference between the width of the two columns. I just doubled checked too by trying it out in your CodePen example.

I’ve read through your original blog posting on these grids and some folks suggested using a negative-margin solution. I just wondered what you recommended or how you would handle this? Otherwise this really is the perfect grid system and hopefully you have a suggestion for the best practice to tackle this.

Hey Chris (sorry for posting this on an old cast), what’s your thoughts on CSS table layouts? I think I’ve heard you mention them in passing, and Google searching the subject just return a slew of polar opinions and hypothetical uses, but I don’t ever read about people using it in the wild. I wonder if it is a good habit to use them or not. I’ve started using them to simple-grid out new projects and they seem to only have benefits, like….

being able to use border-spacing instead of having to worry about even padding and box-sizing
equal height columns
they are flexible by default when the parent uses width:100%
you can set a fixed width on a single column and the other(s) will flex nicely (no need for floats)
they DON’T BREAK–fudge up the math somewhere and the columns will still act like columns instead of inline-blocks
the vertical-align property (which all of the sudden I find use for quite often… the drawback being you have to manually set vertical-align:top on “regular” grid columns)
they effectively force min-width set to the largest inline child element (that can be a good thing or a bad thing)

Table layouts just seem to be highly beneficial over inline-blocks and especially over floating blocks. Am I just not reading enough to notice people using them, or is there some fundamental flaw/workflow issue with CSS table layouts of which I’m not aware?

As always excellent screencast, it’s amazing what knowing what are you doing let you create simple but effective stuff . You use simple css to build a grid in minutes. Your screencast has inspire me, I going to build my own grid and stop using framework.
Thinking about framework they are great when you start, but you end up with 10-15 css files, thats more than enough.
So every little time I have from work I’m going to spend it trying to build my own grid.
Thanks Chris.

Treehouse is where you go to learn HTML, CSS, and how to build iOS apps. It's a complete education in modern web and app technology, designed to get you ready for a hot new job or to kickstart your own business.

The Lodge is a member login only area with access to video training on how to build websites from scratch using the best modern tools.

What now? I have some ideas for you.

Go explore CodePen!

As a front end designer and developer, you should have an account on CodePen so you can save your snippets, present your ideas, and engage with other front end folk. I'd encourage you to go PRO as well, to unlock the full power of CodePen.

Get the newsletter!

You should sign up for the CSS-Tricks newsletter. It's a clean copy of all the blog posts each week, combined together, right to your inbox. If email isn't your thing, there is an RSS feed, iTunes, and lots of other ways to subscribe.

Listen to ShopTalk!

Subscribe to The Lodge!

The Lodge is a members-only, ad-free video learning area here on CSS-Tricks. Just like the free screencasts, but organized into four large complete series. Membership is also the #1 best way to support CSS-Tricks.

We can do the real footer now.

Site Links

Colophon

CSS-Tricks* is created, written by, and maintained by Chris Coyier. It is built on WordPress, hosted by Media Temple, and the assets are served by MaxCDN. The fonts are Source Sans and Source Code Pro. It is made possible by viewers like you who subscribe to The Lodge and through advertising for products and services I like.