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.

CSS Example

In my starter themes I use a fixed sidebar width (355px) and flexible content area. Using CSS Grid:

Copy

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.

Copy