_grid.scss in active_frontend-17.6.0

- old
+ new

@@ -2,10 +2,11 @@
 // ==================================================
 // Visibilities
 // Rows
 // Containers
 // Columns
+// Bricks
 // Media Queries
 
 // Visibilities
 // ==================================================
 .visible { display: inherit; }
@@ -55,10 +56,31 @@
       }
     }
   }
 }
 
+.container-cols,
+.container-grid {
+  box-sizing: border-box;
+  white-space: normal;
+}
+.container-cols {
+  column-count: 3;
+  column-gap: 20px;
+
+  > .brick {
+    margin-bottom: 20px;
+
+    &:last-child { margin: 0; }
+  }
+}
+.container-grid {
+  display: grid;
+  grid-gap: 20px;
+  grid-template-columns: repeat(auto-fill, minmax(33.33333%, 1fr));
+}
+
 // Columns
 // ==================================================
 .cols {
   display: inline;
   float: left;
@@ -78,12 +100,24 @@
     &.alpha.omega { width: $width; }
   }
   .offset-by-#{$name} { padding-left: $width; }
 }
 
+// Bricks
+// ==================================================
+.brick {
+  box-sizing: border-box;
+  display: inline-block;
+  width: 100%;
+}
+
 // Media Queries
 // ==================================================
+@media only screen and (min-width: breakpoint-min-width(xl)) {
+  .container-cols { column-count: 4; }
+  .container-grid { grid-template-columns: repeat(auto-fill, minmax(25%, 1fr)); }
+}
 @media only screen and (min-width: breakpoint-min-width(b)) and (max-width: breakpoint-max-width(l)) {
   @each $name, $widths in $grid-container-widths {
     $width: nth($widths, 2);
 
     @if $width {
@@ -101,10 +135,12 @@
     @if $width {
       .container-fixed-#{$name} { width: 813px; }
     }
   }
 
+  .container-cols { column-count: 2; }
+  .container-grid { grid-template-columns: repeat(auto-fill, minmax(50%, 1fr)); }
   .hidden-desktop { display: inherit; }
   .hidden-tablet { display: none; }
 }
 @media only screen and (max-width: breakpoint-max-width(s)) {
   @each $name, $margin in $grid-row-margins {
@@ -137,8 +173,14 @@
         width: 100%;
       }
     }
     .offset-by-#{$name} { padding-left: 0; }
   }
+
+  .container-cols {
+    column-count: 1;
+    column-gap: 0;
+  }
+  .container-grid { grid-template-columns: repeat(auto-fill, minmax(100%, 1fr)); }
   .hidden-desktop { display: inherit; }
   .hidden-phone { display: none; }
 }