diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html
index 79bbf0da11..a51b71ccaf 100644
--- a/layouts/_default/baseof.html
+++ b/layouts/_default/baseof.html
@@ -5,27 +5,24 @@
   {{ partial "head.html" . }}
 </head>
 
-<body
-  class="bg-background-light dark:bg-background-dark text-base divide-y divide-divider-light dark:divide-divider-dark flex flex-col h-max dark:text-white">
+<body class="min-w-fit bg-background-light text-base dark:bg-background-dark dark:text-white">
   {{ partial "header.html" . }}
-  <main class="min-h-screen flex items-stretch">
+  <main class="grid grid-cols-main md:flex xl:grid-cols-main-xl">
     <div id="sidebar"
-      class="z-10 flex flex-col items-end sticky top-16 h-[calc(100vh-theme(space.16))] overflow-y-scroll flex-shrink-0 flex-grow md:fixed md:w-screen md:hidden bg-background-light dark:bg-gray-dark-100">
+      class="sticky top-16 h-[calc(100lvh-theme(space.16))] overflow-y-scroll flex flex-row-reverse dark:bg-gray-dark-100 md:fixed md:z-10 md:hidden md:h-screen md:w-screen">
       {{ block "left" . }}
       {{ end }}
     </div>
-    <div class="w-[840px] flex flex-col lg:w-full lg:flex-grow px-8 pb-16 sm:px-4 overflow-hidden">
+    <div class="p-6 pt-0">
       {{ block "main" . }}
       {{ end }}
     </div>
-    <div class="sticky w-[300px] top-16 p-5 h-[calc(100vh-theme(space.16))] flex-grow overflow-y-auto lg:hidden">
+    <div class="sticky top-16 h-[calc(100lvh-theme(space.16))] overflow-y-scroll lg:hidden">
       {{ block "right" . }}
       {{ end }}
     </div>
   </main>
-  <footer>
-    {{ partialCached "footer.html" . }}
-  </footer>
+  <footer>{{ partialCached "footer.html" . }}</footer>
 </body>
 
 </html>
diff --git a/layouts/partials/aside.html b/layouts/partials/aside.html
index b9e53c1741..d2260cfc12 100644
--- a/layouts/partials/aside.html
+++ b/layouts/partials/aside.html
@@ -1,6 +1,4 @@
-<aside class="space-y-4 lg:hidden w-[300px]">
-  <div class="space-y-2">
-    {{ partial "github-links.html" . }}
-  </div>
+<aside class="py-4 space-y-4">
+  {{ partial "github-links.html" . }}
   {{ partial "toc-default.html" . }}
 </aside>
diff --git a/tailwind.config.js b/tailwind.config.js
index acec655fc6..5114eef60b 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -4,6 +4,10 @@ module.exports = {
   darkMode: "class",
   theme: {
     extend: {
+      gridTemplateColumns: {
+        "main": 'minmax(300px, 1fr) 840px minmax(300px, 1fr)',
+        "main-xl": '300px 840px minmax(0, 1fr)',
+      },
       typography: (theme) => ({
         DEFAULT: {
           css: {
