diff --git a/assets/js/sidebar-load-width.js b/assets/js/sidebar-load-width.js
index 84dd8c6f8bf..2b25374cdb0 100644
--- a/assets/js/sidebar-load-width.js
+++ b/assets/js/sidebar-load-width.js
@@ -9,7 +9,7 @@
 
         if (cssStyles) {
             var styleTag = document.createElement("style");
-            styleTag.innerHTML = ".td-resizable-grid .td-main > .row.flex-xl-nowrap {" + cssStyles + "}";
+            styleTag.innerHTML = ".r-grid-container {" + cssStyles + "}";
             document.head.appendChild(styleTag);
         }
     } catch (e) {
diff --git a/assets/js/sidebar-resizer.js b/assets/js/sidebar-resizer.js
index d0102c4fc05..8cb82dd940b 100644
--- a/assets/js/sidebar-resizer.js
+++ b/assets/js/sidebar-resizer.js
@@ -1,6 +1,6 @@
 (function () {
     document.addEventListener("DOMContentLoaded", () => {
-        const gridContainer = document.querySelector(".td-resizable-grid .td-main > .row.flex-xl-nowrap");
+        const gridContainer = document.querySelector(".r-grid-container");
         const leftResizer = document.getElementById("left-resizer");
         const rightResizer = document.getElementById("right-resizer");
 
diff --git a/assets/scss/_layout-resizers.scss b/assets/scss/_layout-resizers.scss
new file mode 100644
index 00000000000..7e747924518
--- /dev/null
+++ b/assets/scss/_layout-resizers.scss
@@ -0,0 +1,99 @@
+// Left sidebar & Right sidebar Resize
+:root {
+  --left-sidebar-width: 240px;
+  --toc-width: 240px;
+
+  --left-sidebar-min-width: 180px;
+  --left-sidebar-max-width: 500px;
+
+  --toc-min-width: 180px;
+  --toc-max-width: 400px;
+
+  --sidebar-resize-width: 5px;
+}
+
+.layout-resizer {
+  width: var(--sidebar-resize-width);
+  cursor: col-resize;
+  background-color: transparent;
+  transition: background-color 0.15s ease;
+  z-index: 1; //Must be lower than the sticky header
+}
+
+.layout-resizer:hover,
+.layout-resizer.is-dragging {
+  background-color: #00b39f;
+}
+
+.r-grid-container .r-sidebar,
+.r-grid-container .r-sidebar-toc,
+.r-grid-container .r-main {
+  width: auto;
+}
+
+@media (min-width: 768px) {
+  .r-grid-container {
+    display: grid;
+    grid-template-columns:
+      var(--left-sidebar-width)
+      var(--sidebar-resize-width)
+      1fr;
+  }
+
+  .r-sidebar {
+    grid-column: 1;
+    grid-row: 1;
+  }
+
+  #left-resizer {
+    grid-column: 2;
+    grid-row: 1;
+    padding-left: 0;
+    padding-right: 0;
+    box-sizing: border-box;
+  }
+
+  .r-main {
+    grid-column: 3;
+    grid-row: 1;
+  }
+}
+
+@media (min-width: 1200px) {
+    .r-grid-container {
+    display: grid;
+    grid-template-columns:
+        var(--left-sidebar-width)
+        var(--sidebar-resize-width)
+        1fr
+        var(--sidebar-resize-width)
+        var(--toc-width);
+
+
+    #right-resizer {
+        grid-column: 4;
+        grid-row: 1;
+        padding-left: 0;
+        padding-right: 0;
+        box-sizing: border-box;
+    }
+
+    .r-sidebar-toc {
+        grid-column: 5;
+        grid-row: 1;
+    }
+
+    &--without-toc {
+        display: grid;
+        grid-template-columns:
+            var(--left-sidebar-width)
+            var(--sidebar-resize-width)
+            1fr;
+
+        #right-resizer,
+        .r-grid-container {
+            display: none;
+        }
+    }
+  }
+}
\ No newline at end of file
diff --git a/assets/scss/_styles_project.scss b/assets/scss/_styles_project.scss
index 6766bab163f..c8c2fcbe3ab 100644
--- a/assets/scss/_styles_project.scss
+++ b/assets/scss/_styles_project.scss
@@ -15,6 +15,7 @@
 @import "elements_project";
 @import "summary.scss";
 @import "_kanvas-corner-popup.scss";
+@import "_layout-resizers.scss";
 
 .navbar-dark {
   min-height: 5rem;
@@ -394,92 +395,6 @@ a:not([href]):not([class]):hover {
   }
 }
 
-// Left sidebar & Right sidebar Resize
-:root {
-  --left-sidebar-width: 240px;
-  --toc-width: 240px;
-
-  --left-sidebar-min-width: 180px;
-  --left-sidebar-max-width: 500px;
-
-  --toc-min-width: 180px;
-  --toc-max-width: 400px;
-
-  --sidebar-resize-width: 5px;
-}
-
-.layout-resizer {
-  width: var(--sidebar-resize-width);
-  cursor: col-resize;
-  background-color: rgba(0, 0, 0, 0.03);
-  transition: background-color 0.15s ease;
-  z-index: 1; //Must be lower than the sticky header
-}
-
-.layout-resizer:hover,
-.layout-resizer.is-dragging {
-  background-color: $primary;
-}
-
-.td-resizable-grid .td-sidebar,
-.td-resizable-grid .td-sidebar-toc,
-.td-resizable-grid main[role="main"] {
-  width: auto;
-}
-
-@media (min-width: 768px) {
-  .td-resizable-grid .td-main > .row.flex-xl-nowrap {
-    display: grid;
-    grid-template-columns:
-      var(--left-sidebar-width)
-      var(--sidebar-resize-width)
-      1fr;
-  }
-
-  .td-sidebar {
-    grid-column: 1;
-    grid-row: 1;
-  }
-
-  #left-resizer {
-    grid-column: 2;
-    grid-row: 1;
-    padding-left: 0;
-    padding-right: 0;
-    box-sizing: border-box;
-  }
-
-  main[role="main"] {
-    grid-column: 3;
-    grid-row: 1;
-  }
-}
-
-@media (min-width: 1200px) {
-  .td-resizable-grid .td-main > .row.flex-xl-nowrap {
-    display: grid;
-    grid-template-columns:
-      var(--left-sidebar-width)
-      var(--sidebar-resize-width)
-      1fr
-      var(--sidebar-resize-width)
-      var(--toc-width);
-  }
-
-  #right-resizer {
-    grid-column: 4;
-    grid-row: 1;
-    padding-left: 0;
-    padding-right: 0;
-    box-sizing: border-box;
-  }
-
-  .td-sidebar-toc {
-    grid-column: 5;
-    grid-row: 1;
-  }
-}
-
 // pageinfo
 .pageinfo {
   font-weight: $font-weight-medium;
@@ -610,7 +525,7 @@ a:not([href]):not([class]):hover {
   margin-bottom: 4rem;
   font-size: 5rem;
   text-align: left;
-  background-image: 
+  background-image:
     linear-gradient(to right, rgba(255, 255, 255, .9) 0px, rgb(0, 211, 169) 34%, rgb(235, 192, 23) 71%, rgb(255,243,197) 100%);
   background-position:
     0% 0%,
@@ -706,11 +621,11 @@ a:not([href]):not([class]):hover {
 .dash-sign-container {
   display: flex;
   align-items: center;
-  justify-content: space-between; 
+  justify-content: space-between;
   text-align: right;
 
   h1.dashboard {
-    max-width: 70%;        
+    max-width: 70%;
     text-align: left;
     flex-shrink: 0;
     @media (max-width: 768px) {
diff --git a/layouts/docs/baseof.html b/layouts/docs/baseof.html
index f66c4a5f5be..1835e9d9b10 100644
--- a/layouts/docs/baseof.html
+++ b/layouts/docs/baseof.html
@@ -10,21 +10,22 @@
   <header>{{ partial "navbar.html" . }}</header>
   <div class="container-fluid td-outer td-resizable-grid">
     <div class="td-main">
-      <div class="row flex-xl-nowrap">
-        <aside class="col-12 col-md-3 col-xl-2 td-sidebar d-print-none">
+      <div class="row flex-xl-nowrap r-grid-container">
+        <aside class="col-12 col-md-3 col-xl-2 td-sidebar d-print-none r-sidebar">
           {{ partial "sidebar.html" . }}
         </aside>
 
         <div class="layout-resizer d-none d-md-block" id="left-resizer"></div>
 
         <div class="layout-resizer d-none d-xl-block" id="right-resizer"></div>
-        <aside class="d-none d-xl-block col-xl-2 td-sidebar-toc d-print-none">
+
+        <aside class="d-none d-xl-block col-xl-2 td-sidebar-toc d-print-none r-sidebar-toc">
           {{ partial "page-meta-links.html" . }}
           {{ partial "toc.html" . }}
           {{ partial "taxonomy_terms_clouds.html" . }}
         </aside>
 
-        <main class="col-12 col-md-9 col-xl-8" role="main">
+        <main class="col-12 col-md-9 col-xl-8 r-main" role="main">
           {{ partial "version-banner.html" . }}
           <div class="page-header d-flex justify-content-between align-items-center">
             {{ if not .Site.Params.ui.breadcrumb_disable }}