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.
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.
Amazing. Thank you.
I don’t think I can say anything else.
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?
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! :)
Couldn’t you use
@mediaqueries 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
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:
http://codepen.io/Hylix/pen/sdLvj
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.
Nice screencast, as usual :)
I’d favor using [class|=”col”] over [class*=”col”] (should be safer)
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.
Sorry for the plug ;)
A key point to your “Don’t Over Think Grid” is being able to use
box-sizing: border-box;, which has decent support. Withoutbox-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 forbox-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-polyfillI 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!
Sweet
Nice and easy :-D Likey Likey
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
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
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.
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.
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…
I wonder why you are using
last-of-typeinstead of just a plain oldlast-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-childinstead?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.
Thanks, Chris! It works.
Now I can enjoy it even more. ;)
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
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.
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?
Nice tutorial…keep up the “grid work”…er I mean “good work”.
Very good tutorial, I really learned a lot! Sadly, [class*=’col-‘] doesn’t seem to work in IE8 :(
Just what I needed. Thanks much!
If someone would implement the packing managers of TK, web layout would be a non-problem.
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.
Great screencast! Thanks so much!
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 ;)
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
Man, you are awesome. Thank you!
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.
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 {
}
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
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
Seems like a great way to do it to me!
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, 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.
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!
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!
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!
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-spacinginstead of having to worry about evenpaddingandbox-sizingequal 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-alignproperty (which all of the sudden I find use for quite often… the drawback being you have to manually setvertical-align:topon “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?
You never fail to amazing me with your talent and insight. Thanks!
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.
Well done !