diff --git a/tildes/scss/_layout.scss b/tildes/scss/_layout.scss
index a92cb06..c5edbac 100644
--- a/tildes/scss/_layout.scss
+++ b/tildes/scss/_layout.scss
@@ -6,20 +6,21 @@ body {
     display: grid;
     grid-template-rows: auto 1fr auto;
 
-    grid-template-columns: 1fr minmax(auto, $main-max-width) 1fr;
+    grid-template-columns: 1fr minmax(auto, $main-max-width) auto 1fr;
     grid-template-areas:
-      ". header ."
-      ". main   ."
-      ". footer .";
-    grid-row-gap: 0.2rem;
+      ". header header  ."
+      ". main   sidebar ."
+      ". footer footer  .";
+    grid-gap: 0.4rem;
 
-    @media (min-width: $show-sidebar-width) {
-      grid-template-columns: 1fr minmax(auto, $main-max-width) auto 1fr;
+    @media (max-width: $show-sidebar-width) {
+      grid-template-columns: 1fr minmax(auto, $main-max-width) 1fr;
       grid-template-areas:
-        ". header header  ."
-        ". main   sidebar ."
-        ". footer footer  .";
-      grid-gap: 0.4rem;
+        ". header ."
+        ". main   ."
+        ". footer .";
+      grid-row-gap: 0.2rem;
+      grid-column-gap: 0;
     }
   }
 }
@@ -76,12 +77,13 @@ body {
 }
 
 #sidebar {
-  // hidden by default, show on wider screens
-  display: none;
+  // displayed by default, hide on smaller screens - doing it this way (vs. hidden by
+  // default) seems to be necessary to prevent a layout "shift" while loading
+  display: block;
+  grid-area: sidebar;
 
-  @media (min-width: $show-sidebar-width) {
-    display: block;
-    grid-area: sidebar;
+  @media (max-width: $show-sidebar-width) {
+    display: none;
   }
 
   width: $sidebar-width;