_grid.scss in active_frontend-17.6.3

- old
+ new

@@ -72,14 +72,15 @@
 
     &:last-child { margin: 0; }
   }
 }
 .container-grid {
+  align-content: flex-start;
   align-items: flex-start;
   display: grid;
   grid-gap: 20px;
-  grid-template-columns: repeat(3, 1fr);
+  grid-template-columns: calc(33.33333% - 10px) calc(33.33333% - 20px) calc(33.33333% - 10px);
 
   @each $name in center, flex-end, flex-start, space-around, space-between, stretch {
     &.align-content-#{$name} { align-content: $name; }
   }
   @each $name in baseline, center, flex-end, flex-start, stretch {
@@ -129,11 +130,11 @@
 
 // Media Queries
 // ==================================================
 @media only screen and (min-width: breakpoint-min-width(xl)) {
   .container-cols { column-count: 4; }
-  .container-grid { grid-template-columns: repeat(4, 1fr); }
+  .container-grid { grid-template-columns: calc(25% - 10px) calc(25% - 20px) calc(25% - 20px) calc(25% - 10px); }
 }
 @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);
 
@@ -153,10 +154,10 @@
       .container-fixed-#{$name} { width: 813px; }
     }
   }
 
   .container-cols { column-count: 2; }
-  .container-grid { grid-template-columns: repeat(2, 1fr); }
+  .container-grid { grid-template-columns: calc(50% - 10px) calc(50% - 10px); }
   .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 {