Grow your CSS skills. Land your dream job.

#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.

Download Video File

Comments

  1. David Ferguson
    Permalink to comment#

    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.

  2. Mathieu Gosbee
    Permalink to comment#

    Amazing. Thank you.

    I don’t think I can say anything else.

  3. Permalink to comment#

    Hi Chris,

    How do you handle your grids on different devices? Example:

    On desktop top you have main-content (50%) + sidebars (2x 25%).
    On tablet your have main-content (50%) + sidebar (50%)
    On phone you have main-content (100%) + sidebar

    Do you use the same column naming, or do you have a different approach?

    • 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.

      Do you have a technique?

    • Kristine
      Permalink to comment#

      Hi!

      I’m wondering about the same thing – if I want to see different grids on different devices how can I detect those breakpoints, how to document in the code what happens to each column?

      I’ll appreciate any help! :)

    • Peter Kos
      Permalink to comment#

      Couldn’t you use @media queries per device?
      Eg:

      @media screen and (max-width: 1160px) {} /Desktop */
      @media screen and (max-width: 760px) {} /
      Tablet /
      @media screen and (max-width: 460px) {} /
      Mobile */


      Note: these are estimated pixel values. For more information on CSS @media queries, see Mozilla Developer Network

  4. Permalink to comment#

    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

  5. Matthew Davis
    Permalink to comment#

    I really enjoyed this – I’ve been playing with grids for a while now, and they’ve always seemed pretty complicated, but, as always, you make them simple to understand :)

    I’ve done a Pen on CodePen that takes what you’ve written, adds in some mixins, and makes this super-easy to use for any grid sizes – without adding extra classes for the different sizes.

    Don’t Overthink It Grids – Reloaded

    Check it out, and let me know what you think, or if I’ve done anything stupid :)

    Cheers, Chris – Keep up the awesome work!

  6. sirfilip
    Permalink to comment#

    Sweet

  7. Permalink to comment#

    Nice and easy :-D Likey Likey

  8. Permalink to comment#

    Thanks for the Vid, I like that you recommend people to try to build there own Grid.
    BTW your Mac dock has empty spaces. Did you do that over the command line?
    Cheers A

  9. Steven Watson
    Permalink to comment#

    Great screencast, Chris!

    It really gave me an eye-opener into the diffent techniques to grids, to be honest websites with this type of grid layout (such as CSS-Tricks) tend to look so much more eye-catching!

    I will use your techniques in my next project.

    Thanks

  10. Thanks for this.

    It’s nice to know I’m not the only one that rolls my own simple grids. Some existing ones are so overly complex for most site needs.

  11. Rodrigo Ibarra
    Permalink to comment#

    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…

    but still, love this simple grid.

    • Rodrigo Ibarra
      Permalink to comment#

      ohh never mind me… didn’t read the whole comment thread and there’s one just like this one up there… i’ll just fade quietly into the background now…

  12. I wonder why you are using last-of-type instead of just a plain old last-child. Sure it is more save to use it and you can add some additional markup inside your grid, but it is not well support (http://reference.sitepoint.com/css/pseudoclass-lastoftype).

    Wouldn’t it be a better approach to keep your grid mark up “clean” and use the last-child instead?

  13. Irene S
    Permalink to comment#

    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) ?

    • At the moment it’s on YouTube – try clicking the gear in the bottom row of buttons and stuff and changing the resolution to higher.

  14. Irene S
    Permalink to comment#

    Thanks, Chris! It works.
    Now I can enjoy it even more. ;)

  15. Dean H
    Permalink to comment#

    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.

    It’s another nice way not to over-think grids. Here’s the link to the developer site: http://www.delsolsoftware.com/blueprintbuilder/index.html

  16. Julian
    Permalink to comment#

    Really nice screencast. It’s been a few years since I did any hardcore CSS and this has been a great update, so many new tweaks that get rid of the old irritations.

  17. John
    Permalink to comment#

    Hi Chris,

    Do you ever declare a max-width, use a media query at some point in the large-scale, or do you allow 80% to just scale up infinitely?

  18. Nice tutorial…keep up the “grid work”…er I mean “good work”.

  19. Adrian
    Permalink to comment#

    Very good tutorial, I really learned a lot! Sadly, [class*='col-'] doesn’t seem to work in IE8 :(

  20. Tricia
    Permalink to comment#

    Just what I needed. Thanks much!

  21. Chris
    Permalink to comment#

    If someone would implement the packing managers of TK, web layout would be a non-problem.

  22. paul
    Permalink to comment#

    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.

  23. Rob
    Permalink to comment#

    Great screencast! Thanks so much!

  24. Hey guys,

    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 ;)

  25. Permalink to comment#

    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

  26. Permalink to comment#

    Man, you are awesome. Thank you!

  27. Permalink to comment#

    First thing I did after watching this video was to see how this site worked.

    Same techniques. Thanks for letting us see how you go about coding.

  28. 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

    html
    div id=”content”
    /div
    (Had to remove chevrons to show my code heh heh)
    css

    content {

    background-color: #FFF;
    position: static;
    width: 800px;
    display: block;
    top: 190px;
    padding: 0px;
    height: 600px;
    margin-right: auto;
    margin-left: auto;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    

    }

    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.

    Thomas

  29. Permalink to comment#

    Great article/video Chris.

    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?

    I forked your Pen as an example: http://codepen.io/jhebb/pen/KJDmI

  30. 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.

  31. agarwal
    Permalink to comment#

    Hi, Nice video. can’t we use inline-block, rater than float??

    • You can. With floats, you need to clear. With inline-block, you need to deal with the space between the blocks somehow. It’s a horse apiece. I narrowly prefer floats.

  32. Fritzki
    Permalink to comment#

    Hey Chris, nice screen cast, I’m enjoying every tutorial you make on this site!

    I have something to ask, do you have any idea on what situation should we use our own grid system? Since there are many grid frameworks out there and very easy to use like Gridpak.

    Is responsive is a must in grids?

    Thanks!

  33. 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.

    Thanks!

  34. caseybaggz
    Permalink to comment#

    Great cast! I know I’m coming in on this late, but I really appreciate the help with simplifying the grid and straying from using templates that are not totally necessary.

    Can’t wait till Flexbox is universal!

  35. Phil Tune
    Permalink to comment#

    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)

    .row { display:table; width:100%; border-spacing:20px; }
    .col { display:table-cell; vertical-align:top; }
    .col-2-3 { }  //no % width necessary... this col will just flex nicely
    .col-1-3 { width:33%; max-width:18em; min-width:10em; } //say, if you want only your main col to flex most of the time
    
    @media (max-width:30em) { .col { display:block; width:100%; } }

    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?

  36. Kamaboko
    Permalink to comment#

    You never fail to amazing me with your talent and insight. Thanks!

  37. Gustavo Caso
    Permalink to comment#

    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.

Leave a Comment

Current day month ye@r *

*May or may not contain any actual "CSS" or "Tricks".