So last month, March 2017, Grid CSS support dropped for almost all the major browsers. Grid is a pretty nice system for 2-dimensional layout while Flexbox remains a good system for 1-dimensional layout. A lot of folks have been asking if Grid replaces Flexbox but it does not. In fact, they can play really well together.

GridCSS Holy Grail Layout

The [holy grail] layout is a pretty common one, seen pretty much everywhere:

  • header and footer
  • middle content area with left and right sidebars

Creating it in Grid was something I wanted to try to figure out as a way of learning. My attempt is over on CodePen.io:

See the Pen GridCSS holy grail by Tamara Temple (@tamouse) on CodePen.

I’m still struggling with getting the height to stretch out if the content does not naturally fill the window.

Flexbox Dashboard with Grid Section

This was more successful. I wanted a full-height left navigation panel and a masonry-style right panel that would let various guages and displays flow nicely.

See the Pen Flexbox Dashboard with Grid Section by Tamara Temple (@tamouse) on CodePen.

It’s not really responsive, I’d like it if the left panel shrunk down when the viewport gets narrow enough, but I don’t think I can make that happen on codepen.