diff --git a/css/_grillade.scss b/css/_grillade.scss
new file mode 100644
index 0000000..c7203e4
--- /dev/null
+++ b/css/_grillade.scss
@@ -0,0 +1,96 @@
+/* --------------------------------------- */
+/* ==Grillade : ultra light Grid System    */
+/* --------------------------------------- */
+/* Doc : @TODO */
+// WARNING: THIS IS NOT A COMPLETE GRID FRAMEWORK, just ultra light Grid System
+// if you need complex Grid :
+//   1- use vanilla CSS Grid Layout spec (perfect for you)
+//   2- use Bootstrap (good luck)
+
+@if (not variable_exists(tiny)) or (not variable_exists(small)) or (not variable_exists(medium)) or (not variable_exists(large))
+  {
+  $tiny: 480px !global;
+  $small: 576px !global;
+  $medium: 768px !global;
+  $large: 992px !global;
+}
+
+[class*=" grid-"],
+[class^="grid-"] {
+  @media (min-width: $tiny) {
+    display: grid;
+    grid-auto-flow: dense;
+
+    // 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-gap: $size;
+      }
+    }
+  }
+}
+
+// grid constructor (.grid-2 to .grid-12)
+@for $i from 1 through 12 {
+  [class*="grid-#{$i}"] {
+    grid-template-columns: repeat(#{$i}, 1fr);
+  }
+}
+
+// grid items constructor (.col-1 to .col-12, .row-1 to .row-12)
+@for $i from 1 through 12 {
+  [class*="col-#{$i}"] {
+    grid-column: auto / span #{$i};
+  }
+
+  [class*="row-#{$i}"] {
+    grid-row: auto / span #{$i};
+  }
+}
+
+/* intermediate breakpoints */
+// -small-X suffix means "X columns when < medium screen"
+// example : .grid-4-small-2 will be 1 column (< tiny) then 2 columns (< medium) then 4 columns
+@media (min-width: $tiny) and (max-width: ($medium - 1)) {
+   @for $i from 1 through 4{
+    [class*="grid-"][class*="-small-#{$i}"] {
+      grid-template-columns: repeat(#{$i}, 1fr);
+    }
+
+    [class*="col-"][class*="-small-#{$i}"] {
+      grid-column: auto / span #{$i};
+    }
+  }
+  [class*="-small-all"] {
+    grid-column: 1 / -1;
+  }
+}
+
+// grid order
+.item-first {
+  order: -1;
+}
+
+.item-last {
+  order: 1;
+}
+
+// grid offset
+.grid-offset {
+  visibility: hidden;
+}
+
+// spanning all collumns or rows
+.col-all {
+  grid-column: 1 / -1;
+}
+
+.row-all {
+  grid-row: 1 / -1;
+}
diff --git a/css/knacss-unminified.css b/css/knacss-unminified.css
index 5b39cfa..258e513 100644
--- a/css/knacss-unminified.css
+++ b/css/knacss-unminified.css
@@ -2830,7 +2830,7 @@ button:focus {
       grid-row: auto/span 12;
 }
 
-/* intermediate breakpoint */
+/* intermediate breakpoints */
 @media (min-width: 480px) and (max-width: 767px) {
   [class*="grid-"][class*="-small-1"] {
     -ms-grid-columns: (1fr)[1];
diff --git a/sass/components/_grillade.scss b/sass/components/_grillade.scss
index 3ff652d..c7203e4 100644
--- a/sass/components/_grillade.scss
+++ b/sass/components/_grillade.scss
@@ -7,11 +7,12 @@
 //   1- use vanilla CSS Grid Layout spec (perfect for you)
 //   2- use Bootstrap (good luck)
 
-@if (not variable_exists(tiny)) or (not variable_exists(small))  or (not variable_exists(medium))
+@if (not variable_exists(tiny)) or (not variable_exists(small)) or (not variable_exists(medium)) or (not variable_exists(large))
   {
   $tiny: 480px !global;
   $small: 576px !global;
   $medium: 768px !global;
+  $large: 992px !global;
 }
 
 [class*=" grid-"],
@@ -53,9 +54,9 @@
   }
 }
 
-/* intermediate breakpoint */
-// -small-X suffix means "X columns when < small screen"
-// example : .grid-4-small-2 will be 1 column (< tiny) then 2 columns (< small) then 4 columns
+/* intermediate breakpoints */
+// -small-X suffix means "X columns when < medium screen"
+// example : .grid-4-small-2 will be 1 column (< tiny) then 2 columns (< medium) then 4 columns
 @media (min-width: $tiny) and (max-width: ($medium - 1)) {
    @for $i from 1 through 4{
     [class*="grid-"][class*="-small-#{$i}"] {