diff --git a/assets/css/010_spacing.css b/assets/css/010_spacing.css
index 6ab72a9..bc09a03 100644
--- a/assets/css/010_spacing.css
+++ b/assets/css/010_spacing.css
@@ -50,10 +50,6 @@ hr {
   margin-block: var(--space-m);
 }
 
-main {
-  margin-block-end: var(--space-xl);
-}
-
 p + p {
   margin-block-start: var(--space-paragraph);
 }
diff --git a/assets/css/010_structure.css b/assets/css/010_structure.css
index afbf24e..3d1287c 100644
--- a/assets/css/010_structure.css
+++ b/assets/css/010_structure.css
@@ -12,18 +12,63 @@
  ************************/
 
 :root {
-  --content-width: 40rem;
+  --content-width: 30rem;
+  --gutter-width: var(--space-m);
 }
 
 body {
+  display: grid;
+  gap: 0;
+  grid-template-columns:
+    [full-start]
+    1fr
+    [wide-start]
+    1fr
+    [wide-gutter-start wide-gutter-left-start]
+    var(--gutter-width)
+    [wide-gutter-left-end gutter-start gutter-left-start]
+    var(--gutter-width)
+    [gutter-left-end main-start]
+    minmax(auto, var(--content-width))
+    [main-end gutter-right-start]
+    var(--gutter-width)
+    [gutter-right-end gutter-end wide-gutter-right-start]
+    var(--gutter-width)
+    [wide-gutter-right-end wide-gutter-end]
+    1fr
+    [wide-end]
+    1fr
+    [full-end];
   margin: 0;
 }
 
-main {
-  /* Center the content and ensure a minimum margin. The calculation in the
-   * second argument does what `auto` would do if it could be used in max(). */
-  margin-inline: max(var(--space-s), 50% - var(--content-width) / 2);
-  max-width: var(--content-width);
+.body__container,
+.site-header,
+main
+{
+  display: grid;
+  grid-template-columns: subgrid;
+  grid-column: full-start / full-end;
+}
+
+.body__container {
+  gap: var(--space-xl) 0;
+}
+
+.nav-breadcrumb,
+.site-header__content,
+.site-footer
+{
+  grid-column: main-start / main-end;
+}
+
+{{- $wideElements := "figure, pre" -}}
+
+.body__container > :not({{ $wideElements }}) {
+  grid-column: main-start / main-end;
+}
+.body__container > :is(figure, pre) {
+  grid-column: wide-gutter-start / wide-gutter-end;
 }
 
 figure, img {
diff --git a/assets/css/099_content.css b/assets/css/099_content.css
index ed036f9..dff6bd9 100644
--- a/assets/css/099_content.css
+++ b/assets/css/099_content.css
@@ -21,6 +21,11 @@
 .content-title {
   margin-block: var(--space-xl) var(--space-l);
 
+  /* margin-block-start is handled by the grid */
+  &:first-child, &:first-child .title {
+    margin-block-start: 0;
+  }
+
   .title:has(+ .subtitle) {
     margin-block-end: var(--space-xs);
   }
diff --git a/assets/css/099_site_header.css b/assets/css/099_site_header.css
index 71dd4f3..471f966 100644
--- a/assets/css/099_site_header.css
+++ b/assets/css/099_site_header.css
@@ -44,11 +44,3 @@
     }
   }
 }
-
-.site-header__container,
-.site-footer__container {
-  /* Center the content and ensure a minimum margin. The calculation in the
-   * second argument does what `auto` would do if it could be used in max(). */
-  margin-inline: max(var(--space-m), 50% - var(--content-width) / 2);
-  max-width: var(--content-width);
-}
diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html
index 38d2ec2..28c5f64 100644
--- a/layouts/_default/baseof.html
+++ b/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>