autogrid object

changelog.md

@@ -1,6 +1,7 @@
 # changelog v7.0.0beta (31 juillet 2017)
-- architecture globale revisitée (_vendor, _config, _library, components)
+- architecture globale revisitée (vendor, config, library, components)
 - normalize.css v7.0.0
+- autogrid object en Grid Layout
 
 # changelog v6.1.2 (21 juin 2017)
 - alignement des helpers flexbox sur ceux de Bootstrap (`.d-flex`, `.flex-row`, `.flex-column`, `.mr-auto`)

sass/_config/_variables.scss

@@ -57,5 +57,8 @@ $extra-large-plus-value : 12rem !default; // extra large value for margins / pad
 $ultra-large-value      : 16rem !default; // ultra large value for margins / paddings
 $ultra-large-plus-value : 20rem !default; // ultra large value for margins / paddings
 
+// grid gutters (for .has-gutter-* classes)
+$grid-gutters: ( '': 1rem, '-l': 2rem, '-xl': 4rem );
+
 //kna-namespace (default : null)
 $kna-namespace: null !default;

sass/components/autogrid.scss

@@ -1,28 +1,29 @@
 /* ----------------------------- */
 /* ==Autogrid object             */
 /* ----------------------------- */
-/* see http://codepen.io/raphaelgoetter/pen/KMgBJd */
+/* see https://codepen.io/raphaelgoetter/pen/zzwxEE */
 
-@media (min-width: $small) {
-  [class^="autogrid"],
-  [class*=" autogrid"] {
-    display: flex;
-  }
+.o-autogrid {
+  @media (min-width: $small) {
+    display: grid;
+    grid-auto-flow: column;
+    grid-auto-column: 1fr;
 
-  [class^="autogrid"] > *,
-  [class*=" autogrid"] > * {
-    flex: 1;
-    min-width: 0; /* avoid min-width:auto */
-  }
-}
-
-/* Autogrid variants */
-@media (min-width: $small) {
-  .has-gutter > *:not(:first-child) {
-    margin-left: 1rem;
-  }
-
-  [class*="--reverse"] {
-    flex-direction: row-reverse;
+    // gutters
+    @if variable_exists(grid-gutters) {
+      $gutter: $grid-gutters !global;
+
+    } @else {
+      $gutter: ( '': 1rem, '-l': 2rem, '-xl': 4rem ) !global;
+    }
+    @each $affix, $size in $gutter {
+      &.has-gutter#{$affix} {
+        grid-column-gap: $size;
+      }
+    }
+
+    & > * {
+      min-width: 0; /* avoid min-width: auto on children */
+    }
   }
 }