Using CSS Grid with the Underscores Theme

October 8th, 2019 Update: WP Rig is a better option than _underscores these days.

This post hasn’t ages so well, but do check out Morten Rand-Hendriksen‘s video below for a comprehensive intro to building a PWA using WP Rig as a starter template

Original post from February 5th, 2019:

In this tutorial we’ll make the Underscores theme CSS Grid friendly by flattening out the layout. There are two main divs we can lose in order to make the nesting more effective:

<div id="content" class="site-content">

and

<div id=“primary” class=“content-area”>

The first div, #content, opens up in header.php and its closing tags is the in footer.php file.

The #primary div needs to be removed from the following pages:

archive.php
index.php
page.php
search.php
single.php

Now we’re left with the following nesting structure:

<div id="page" class="site">
    <header id="masthead" class="site-header" role="banner">
     </header>
    <main id="main" class="site-main" role="main"></main>
    <aside id="secondary" class="widget-area" role="complementary"></aside>
    <footer id="colophon" class="site-footer" role="contentinfo"></footer>
</div>

Now when we add a grid property to the #site div, the .site-header .site-main .widget-area .site-footer will all fall in line as children.