I love using CSS Grid in my themes. It lets you:
- Quickly build advanced layouts with minimal (and readable) CSS
- Build flexible columns with fixed width gutters, without all the nested divs other approaches like Bootstrap employ
- Easily center elements horizontally and vertically
And much more. It currently has 84% support globally, but to provide support for old versions of IE you’ll need fallback CSS.
In my starter themes I use a fixed sidebar width (355px) and flexible content area. Using CSS Grid:
To add IE support we’ll first use traditional floats, then wrap all our grid-related styling (including the styles to “undo” the floats) in
@supports( grid-area: auto ). This is like a media query but it works based on browser support. I’m using simple percentage widths for the IE floats – it won’t perfectly match the grid styling but it will be close enough, and better than two full width columns.