Build the page scaffolding with CSS grid

Grid columns are symmetrical. From the outside in, they are:

- outer margin
- inner margin
- wide gutter
- inner gutter
- main content

layouts/_default/baseof.html

@@ -8,14 +8,16 @@
     <header class="site-header">
       {{ partial "site/header.html" . }}
     </header>
-    <main>
+    <div class="body__container">
       {{ if not .IsNode }}
         {{ partial "page_breadcrumb.html" . }}
       {{ end }}
-      {{ block "main" . }}{{ end }}
-    </main>
-    <footer class="site-footer">
-      {{ partial "site/footer.html" . }}
-    </footer>
+      <main>
+        {{ block "main" . }}{{ end }}
+      </main>
+      <footer class="site-footer">
+        {{ partial "site/footer.html" . }}
+      </footer>
+    </div>
   </body>
 </html>