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.