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