grid main

src/app/_modules/layout/grid/grid.component.html

@@ -5,12 +5,14 @@
 <div class="wrapper">
   <header class="space"></header>
   <jumbotron></jumbotron>
-  <div class="content">
+  <div class="space">
+    <div class="grid-content layout-corral">
       <left-content></left-content>
-    <div class="main-content">
+      <div class="main-content">
       <router-outlet></router-outlet>
-    </div>
-    <right-content></right-content>
+      </div>
+      <right-content></right-content>
+    </div>      
   </div>
   <footer></footer>
 </div>

src/app/_modules/pages/page/page.component.html

@@ -1,4 +1,4 @@
-<div class="content" *ngIf="page">
+<div *ngIf="page">
   <!-- <div  class="limiter">
     <page-breadcrumbs [page]="page"></page-breadcrumbs>
   </div> -->
@@ -11,7 +11,7 @@
     <p *ngSwitchDefault>Page type {{page?.type?.name}} is undefined</p>
   </div>
 </div>
-<div class="content" *ngIf="!loading && !page">
+<div *ngIf="!loading && !page">
   <page-not-found></page-not-found>
 </div>
 <!--div class="loader" *ngIf="loading"></div-->

src/assets/css/_basics.scss

@@ -89,6 +89,17 @@ jumbotron{
   }
 }
 
+.grid-content{
+  display: flex;
+  >*{
+    flex-grow: 1;
+  }
+}
+.main-content{
+  width: 100%;
+  max-width: $page-width;
+}
+
 
 .menu, .page-header {
   display: flex;
@@ -267,26 +278,6 @@ body {
     display: flex;
     flex-direction: column;
 
-    .content {
-      flex-grow: 1;
-      display: flex;
-      flex-direction: row;
-      flex-wrap: wrap;
-      justify-content: center;
-      gap: 40px;
-      left-content{
-       
-      }
-      .main-content{
-        flex-basis: 840px;
-        .pages{
-          width: 100%;
-        }
-      }
-      right-content{
-        flex-basis: 400px;
-      }
-    }
   }
 }