A few evenings ago, while trying to answer a question on Quora, I had the pleasure of coming across Morten-Rand Hendriksen’s[1] talk CSS Grid Changes Everything (About Web Layouts)[2]. While I had briefly played around with CSS Grid a while back, it wasn’t’ until I watched this vid, that I truly became hooked. If you take nothing else from this post, watch this vid!!

Why CSS Grid is Amazing

In his talk, Morten makes the the following points:

  • Web layouts have always been broken, since the beginning
  • Fundamental Problem: HTML documents are 1-dimensional, layouts are 2-dimensional[3].
  • All our previous tools have just refined how we break web layouts
    • Tables, Frames, Layers, Floats & Clears, and Flexbox all require you to create HTML clutter (via wrappers like .container)
      • This goes against everything we want to do in design, and everything we’ve learned about how to markup websites
    • CSS Grid allows us to remove HTML crud, and write clean, simple, and easy to read CSS
  • Problem: all previous layout tools were content-out and 1-dimensional
    • You apply a layout to an individual item, and then you have to relate the item to other things
  • Solution: tools that are 2-dimensional and layout-in

Code Examples

My favorite feature in CSS Grid is the grid-template-areas property, which allows you to define areas of the site, and then easily re-position those areas responsively. Take a look at this CodePen:

See the Pen CSS Grid – Holy Grail 3 by Geoff Graham (@geoffgraham) on CodePen.

In the above CodePen, if you wanted to reposition the right sidebar to be below, the main content you’d simply add the following media query:

@media only screen and (max-width: 768px) {
    .grid {
        grid-template-areas: "header header header"
                             "sidebar-1 article article"
                             "sidebar-2 sidebar-2 sidebar-2"
                             "footer footer footer";

Here’s an example of a much more complex layout (note: the fr unit stands for “fraction”. So writing 3fr is equivalent to writing 1/3rd or calc(width / 3)):

See the Pen WCEU 2017, Day 2 by Morten Rand-Hendriksen (@mor10) on CodePen.

Note that the grid portion of the CSS (which includes a fallback test, and a mobile-first design) only takes up 63 lines. If you remove the comments and the functionality test, you’re looking at 47 lines highly readable of code.

Further Resources

Anyway, those are some basic concepts, and  I really suggest watching all of Morten’s talks, as he shows some really excellent examples of the many cool things you can do with CSS Grid.

Here’s a list of further resources to dive into, in a roughly suggested order:

  1. Tangentially, I must give a shout-out to Morten Rand-Hendriksen’s class “Making Sense of the CSS Box Model | Lynda.com“. It is the reason I understand CSS, and personally it’s the only truly accessible explanation and introduction of how CSS works that I’ve ever found. Whether you’re a developer who pulls their hair out anytime they have to work with CSS, or a complete beginner – or even if you’ve been working with CSS for a while and kinda sorta get it – it is the way to go, in my humble opinion.
  2. Slides available here
  3. Technically you can make 3-dimensional layouts, but let’s leave that aside for the purposes of this post