Designing WordPress themes, it can be hard breaking out of the ‘boring, boxy’ layouts. CSS being the tool for presentation, was without a layout engine at its core. With the array of different screen sizes and devices, fast responsive layouts has become a necessity. In the meanwhile, a lot of designers has resorted to bloated frameworks, hacks here and there.
CSS Grid Layout is the first serious candidate to fill that hole in the past two decades. And the good news is, it has been available in all major browsers since March 2017. That’s a pretty big deal. A game changer of how we can do layouts with CSS and create grid layouts.
This 2-dimensional system, meaning it can handle both columns and rows, makes placement and rearranging of elements at any breakpoint extremely flexible. And that without having to change anything in the source! This also introduce the auto-placement algorithm, where you can let the browser do all the calculating work for you.
This talk covers the basics of what you need to know to get started, how you can use CSS Grid for your layouts and WordPress themes today, CodePen examples (hack away!), along with some helpful resources to get you on the road to learn more about CSS Grid Layout.