diff --git a/templates/cassiopeia/index.php b/templates/cassiopeia/index.php
index e11b9229b9ab8..6e4d83a343438 100644
--- a/templates/cassiopeia/index.php
+++ b/templates/cassiopeia/index.php
@@ -50,6 +50,18 @@
 	$logo = '<img src="' . $this->baseurl . '/templates/' . $this->template . '/images/logo.svg' . '" class="logo d-inline-block" alt="' . $sitename . '">';
 }
 
+$hasClass = '';
+
+if ($this->countModules('sidebar-left')) 
+{
+	$hasClass .= ' has-sidebar-left';
+}
+
+if ($this->countModules('sidebar-right')) 
+{
+	$hasClass .= ' has-sidebar-right';
+}
+
 // Header bottom margin
 $headerMargin = !$this->countModules('banner') ? ' mb-4' : '';
 
@@ -72,7 +84,8 @@
 	. ($layout ? ' layout-' . $layout : ' no-layout')
 	. ($task ? ' task-' . $task : ' no-task')
 	. ($itemid ? ' itemid-' . $itemid : '')
-	. ' ' . $pageclass;
+	. ' ' . $pageclass
+	. $hasClass;
 	echo ($this->direction == 'rtl' ? ' rtl' : '');
 ?>">
 	<div class="grid-child container-header full-width">
@@ -129,29 +142,25 @@
 	</div>
 	<?php endif; ?>
 
-	<div class="grid-child container-main">
-
-		<?php if ($this->countModules('sidebar-left')) : ?>
-		<div class="container-sidebar-left">
-			<jdoc:include type="modules" name="sidebar-left" style="default" />
-		</div>
-		<?php endif; ?>
-
-		<div class="container-component">
-			<jdoc:include type="modules" name="main-top" style="cardGrey" />
-			<jdoc:include type="message" />
-			<jdoc:include type="component" />
-			<jdoc:include type="modules" name="breadcrumbs" style="none" />
-			<jdoc:include type="modules" name="main-bottom" style="cardGrey" />
-		</div>
+	<?php if ($this->countModules('sidebar-left')) : ?>
+	<div class="grid-child container-sidebar-left">
+		<jdoc:include type="modules" name="sidebar-left" style="default" />
+	</div>
+	<?php endif; ?>
 
-		<?php if ($this->countModules('sidebar-right')) : ?>
-		<div class="container-sidebar-right">
-			<jdoc:include type="modules" name="sidebar-right" style="default" />
-		</div>
-		<?php endif; ?>
+	<div class="grid-child container-component">
+		<jdoc:include type="modules" name="main-top" style="cardGrey" />
+		<jdoc:include type="message" />
+		<jdoc:include type="component" />
+		<jdoc:include type="modules" name="breadcrumbs" style="none" />
+		<jdoc:include type="modules" name="main-bottom" style="cardGrey" />
+	</div>
 
+	<?php if ($this->countModules('sidebar-right')) : ?>
+	<div class="grid-child container-sidebar-right">
+		<jdoc:include type="modules" name="sidebar-right" style="default" />
 	</div>
+	<?php endif; ?>
 
 	<?php if ($this->countModules('bottom-a')) : ?>
 	<div class="grid-child container-bottom-a">
diff --git a/templates/cassiopeia/scss/blocks/_css-grid.scss b/templates/cassiopeia/scss/blocks/_css-grid.scss
index 1a321caaa1ae9..a9839db34f4d3 100644
--- a/templates/cassiopeia/scss/blocks/_css-grid.scss
+++ b/templates/cassiopeia/scss/blocks/_css-grid.scss
@@ -1,7 +1,6 @@
 // CSS Grid
 
 @supports (display: grid) {
-  /* autoprefixer: off */
   .site-grid {
     display: grid;
     grid-template-areas:
@@ -9,7 +8,7 @@
       ". banner banner banner banner ."
       ". top-a top-a top-a top-a ."
       ". top-b top-b top-b top-b ."
-      ". main main main main ."
+      ". side-l comp comp side-r ."
       ". bot-a bot-a bot-a bot-a ."
       ". bot-b bot-b bot-b bot-b ."
       ". footer footer footer footer ."
@@ -24,19 +23,23 @@
       margin: 0 0 $cassiopeia-grid-gutter;
     }
 
-    .container-top-a,
-    .container-top-b,
-    .container-bottom-a,
-    .container-bottom-b {
-      display: grid;
+    .container-component,
+    .container-sidebar-left,
+    .container-sidebar-right {
+      display: flex;
+      flex-direction: column;
 
-      > div {
-        margin: 0;
+      > div + div {
+        margin-top: cassiopeia-grid-gutter;
       }
     }
 
-    .container-main {
-      margin: ($cassiopeia-grid-gutter / -2) ($cassiopeia-grid-gutter / -2) ($cassiopeia-grid-gutter / 2);
+    &:not(.has-sidebar-left) .container-component {
+      grid-column-start: main-start;
+    }
+
+    &:not(.has-sidebar-right) .container-component {
+      grid-column-end: main-end;
     }
 
     > .full-width {
@@ -47,7 +50,9 @@
       grid-template-areas:
         ". head head head head ."
         ". banner banner banner banner ."
-        ". main main main main ."
+        ". comp comp comp comp ."
+        ". side-l side-l side-l side-l ."
+        ". side-r side-r side-r side-r ."
         ". top-a top-a top-a top-a ."
         ". top-b top-b top-b top-b ."
         ". bot-a bot-a bot-a bot-a ."
@@ -74,10 +79,12 @@
         padding-right: 0;
         padding-left: 0;
       }
+
       > .grid-child {
         padding-right: ($cassiopeia-grid-gutter * 2);
         padding-left: ($cassiopeia-grid-gutter * 2);     
       }
+
       .container-main {
         padding-right: ($cassiopeia-grid-gutter * 1.5);
         padding-left: ($cassiopeia-grid-gutter * 1.5);
@@ -97,9 +104,7 @@
     @include media-breakpoint-up(xl) {
       margin-top: -3rem;
     }
-
   }
-
 }
 
 .container-header         { grid-area: head; }
@@ -122,11 +127,14 @@
 .container-top-b,
 .container-bottom-a,
 .container-bottom-b {
-  /* autoprefixer: off */
   display: grid;
   grid-gap: $cassiopeia-grid-gutter;
   grid-template-columns: repeat(auto-fit, minmax(24%, 1fr));
 
+  > div {
+    margin: 0;
+  }
+
   @include media-breakpoint-down(md) {
     grid-template-columns: 1fr 1fr;
   }