centered layout with columns breakpoints

web/themes/custom/materiotheme/assets/styles/base/_layout.scss

@@ -8,10 +8,36 @@ body, html{
   margin:0;
   padding:0;
 }
+body{
+  overflow-x:hidden;
+}
+
+div.dialog-off-canvas-main-canvas{
+  width: 100vw;
+}
+
 body.toolbar-horizontal.toolbar-themes.toolbar-no-tabs{
   padding-top: 24px!important;
 }
 
+%grided-width{
+  margin:0 auto;
+  $m: $column_goutiere;
+  $colw: $column_width;
+  $bp: $colw + $m;
+  @while  $bp < 4096px {
+    $upbp: $bp + $colw + $m;
+    @media only screen and (min-width: $bp + 1px) and (max-width: $upbp) {
+      width:$bp - $m;
+    }
+    $bp: $upbp;
+  }
+  // outline:1px blue solid;
+  // &>*{
+  //   outline:1px red solid;
+  // }
+}
+
 
 //  _  _             _
 // | || |___ __ _ __| |___ _ _
@@ -19,14 +45,17 @@ body.toolbar-horizontal.toolbar-themes.toolbar-no-tabs{
 // |_||_\___\__,_\__,_\___|_|
 
 header[role="banner"]{
+   
   background-color: #fff;
   overflow: visible;
   position: fixed;
   z-index: 20;
   width:100vw;
-  // outline: 1px solid blue;
   height: $header_height;
   .wrapper{
+    @extend %grided-width;
+    // box-sizing:border-box;
+    
     .header-block{
       min-height: 15px;
       font-size: 0;
@@ -50,5 +79,8 @@ header[role="banner"]{
 // |_|  |_\__,_|_|_||_|
 
 main[role="main"]{
+  @extend %grided-width;
+
   padding-top: $header_height+8px;
+  
 }

web/themes/custom/materiotheme/assets/styles/base/_variables.scss

@@ -1,3 +1,6 @@
 $base_font_size:16px;
 
 $header_height: 60px;
+
+$column_width: 210px;
+$column_goutiere: 15px;