Skip to content

24 ways to impress your friends

Giving Content Priority with CSS3 Grid Layout


Comments are ordered by helpfulness, as indicated by you. Help us pick out the gems and discourage asshattery by voting on notable comments.

Got something to add? You can leave a comment below.


Wow. I’m blown away by Rachel’s matter-of-fact handling of what is a pretty complex spec (well, it is to me, at least).

If this is the future, I’m slightly intimidated! There are many, many shortcomings to the current widely-supported set of CSS functionality, particularly in the layout department, but it never had this kind of learning curve.

Of course, the beauty of the additive CSS spec is that no-one’s going to stop me making sites using the older layout properties. Not yet, anyway. :)


Actually CSS grids can be used already. Admittedly not for the web but Windows 8 Style apps in HTML, CSS and Javascript. Actually it seems grids are even the default and preferred way of doing the layout of such an app. I did one app using this layout and it is much nicer than the usual floats, positioning, display: table and stuff.

Would be nice if more browsers would support this. To really use it on the web it will take years though but at least there is an applicability option now.

David Storey

Great article Rachel.

Not directly related to Grid layout, but may be useful for your demos: In IE10 using the Metro UI (or whatever it is now called), you can not resize the browser window, but you can put it in a split view, where the smaller docked window is always 360px wide. This view ignores meta viewport, so all of the adaptive demos will render as If they used the widest query. It does support CSS viewport however, so if you use @-ms-viewport, the grids would adapt to show your skinny mobile optimised grids. See for details.

Scott Foley

For the longest time we stayed away from frameworks and grid layouts (remember the original Yahoo framework?) as we thought they were too confining. Well here we are years later and we couldn’t live without them. Especially with the importance of mobile content.

Great break down and great read. Thank you.


I’ve been working several days on migrating one of our sites to a new layout that was using <table><tr><td>… and I tried a few different approaches including the float: left, then the flex regions, etc. and after reading your article I believe this is truly a great approach.

Jordan Moore

Thanks for sharing a great lesson in content choreography Rachel. Grids in CSS was something I looked at briefly (and prompty ran away from because it looked scary) before I played with source order using flexbox (

Your experiments with grids are much more powerful than the flexbox approach to altering source order, it seems to offer finer control over the end result. Kudos to you for making a complex topic easy to understand and follow!

Impress us

Be friendly / use Textile