@medyll/cssfabric 0.0.14 → 0.1.0

package/lib/styles/core/grid/grid.responsive.css

@@ -1,312 +1,605 @@
-@media only screen and (max-width: 0rem) {
-  .grid-xxxl-h {
+@media only screen and (max-width: 1300px) {
+  .grid {
     display: grid;
-    flex-direction: row;
   }
-  .grid-xxxl-h > .grid-main {
-    flex: 1 1 0;
+  .grid-auto-flow-cols {
+    grid-auto-flow: column;
   }
-
-  .grid-xxxl-v {
-    display: grid;
-    flex-direction: column;
+  .grid-auto-cols-auto {
+    grid-auto-columns: auto;
   }
-  .grid-xxxl-v > .grid-main {
-    flex: 1 1 0;
-    max-height: 100%;
+  .grid-auto-cols-min {
+    grid-auto-columns: min-content;
   }
-  .grid-xxxl-v.align-middle, .grid-xxxl-v.grid-align-middle {
-    justify-content: center;
+  .grid-auto-cols-max {
+    grid-auto-columns: max-content;
   }
-
-  .grid-xxxl-h > *:not(.grid-main),
-.grid-xxxl-v > *:not(.grid-main) {
-    flex: 0 0 auto;
+  .grid-auto-cols {
+    grid-auto-columns: minmax(0, 1fr);
+  }
+  .grid-auto-flow-rows {
+    grid-auto-flow: row;
+  }
+  .grid-auto-rows-auto {
+    grid-auto-rows: auto;
+  }
+  .grid-auto-rows-min {
+    grid-auto-rows: min-content;
+  }
+  .grid-auto-rows-max {
+    grid-auto-rows: max-content;
   }
-  .grid-xxxl-h.grid-inline,
-.grid-xxxl-v.grid-inline {
+  .grid-auto-rows {
+    grid-auto-rows: minmax(0, 1fr);
+  }
+
+  .grid-inline {
     display: inline-grid;
   }
 
-  /** raw css properties distribution */
-  .grid-xxxl-h.grid-wrap,
-.grid-xxxl-v.grid-wrap {
-    flex-wrap: wrap;
+  /* template-columns */
+  .grid-cols-1 {
+    grid-template-columns: repeat(1, minmax(0, 1fr));
   }
-  .grid-xxxl-h.grid-wrap-reverse,
-.grid-xxxl-v.grid-wrap-reverse {
-    flex-wrap: wrap-reverse;
+
+  .grid-cols-2 {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
   }
-  .grid-xxxl-h .self-start,
-.grid-xxxl-v .self-start {
-    align-self: flex-start;
+
+  .grid-cols-3 {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
   }
-  .grid-xxxl-h .self-end,
-.grid-xxxl-v .self-end {
-    align-self: flex-end;
+
+  .grid-cols-4 {
+    grid-template-columns: repeat(4, minmax(0, 1fr));
   }
-  .grid-xxxl-h .self-stretch,
-.grid-xxxl-v .self-stretch {
-    align-self: stretch;
+
+  .grid-cols-5 {
+    grid-template-columns: repeat(5, minmax(0, 1fr));
   }
-}
-@media only screen and (max-width: 120rem) {
-  .grid-xxl-h {
-    display: grid;
-    flex-direction: row;
+
+  .grid-cols-6 {
+    grid-template-columns: repeat(6, minmax(0, 1fr));
   }
-  .grid-xxl-h > .grid-main {
-    flex: 1 1 0;
+
+  .grid-cols-7 {
+    grid-template-columns: repeat(7, minmax(0, 1fr));
   }
 
-  .grid-xxl-v {
-    display: grid;
-    flex-direction: column;
+  .grid-cols-8 {
+    grid-template-columns: repeat(8, minmax(0, 1fr));
   }
-  .grid-xxl-v > .grid-main {
-    flex: 1 1 0;
-    max-height: 100%;
+
+  .grid-cols-9 {
+    grid-template-columns: repeat(9, minmax(0, 1fr));
   }
-  .grid-xxl-v.align-middle, .grid-xxl-v.grid-align-middle {
-    justify-content: center;
+
+  .grid-cols-10 {
+    grid-template-columns: repeat(10, minmax(0, 1fr));
   }
 
-  .grid-xxl-h > *:not(.grid-main),
-.grid-xxl-v > *:not(.grid-main) {
-    flex: 0 0 auto;
+  .grid-cols-11 {
+    grid-template-columns: repeat(11, minmax(0, 1fr));
   }
-  .grid-xxl-h.grid-inline,
-.grid-xxl-v.grid-inline {
-    display: inline-grid;
+
+  .grid-cols-12 {
+    grid-template-columns: repeat(12, minmax(0, 1fr));
   }
 
-  /** raw css properties distribution */
-  .grid-xxl-h.grid-wrap,
-.grid-xxl-v.grid-wrap {
-    flex-wrap: wrap;
+  /* template-rows */
+  .grid-rows-1 {
+    grid-template-rows: repeat(1, minmax(0, 1fr));
   }
-  .grid-xxl-h.grid-wrap-reverse,
-.grid-xxl-v.grid-wrap-reverse {
-    flex-wrap: wrap-reverse;
+
+  .grid-rows-2 {
+    grid-template-rows: repeat(2, minmax(0, 1fr));
   }
-  .grid-xxl-h .self-start,
-.grid-xxl-v .self-start {
-    align-self: flex-start;
+
+  .grid-rows-3 {
+    grid-template-rows: repeat(3, minmax(0, 1fr));
   }
-  .grid-xxl-h .self-end,
-.grid-xxl-v .self-end {
-    align-self: flex-end;
+
+  .grid-rows-4 {
+    grid-template-rows: repeat(4, minmax(0, 1fr));
   }
-  .grid-xxl-h .self-stretch,
-.grid-xxl-v .self-stretch {
-    align-self: stretch;
+
+  .grid-rows-5 {
+    grid-template-rows: repeat(5, minmax(0, 1fr));
+  }
+
+  .grid-rows-6 {
+    grid-template-rows: repeat(6, minmax(0, 1fr));
+  }
+
+  .grid-rows-7 {
+    grid-template-rows: repeat(7, minmax(0, 1fr));
+  }
+
+  .grid-rows-8 {
+    grid-template-rows: repeat(8, minmax(0, 1fr));
   }
 }
-@media only screen and (max-width: 90rem) {
-  .grid-xl-h {
+@media only screen and (max-width: 1200px) {
+  .grid {
     display: grid;
-    flex-direction: row;
   }
-  .grid-xl-h > .grid-main {
-    flex: 1 1 0;
+  .grid-auto-flow-cols {
+    grid-auto-flow: column;
+  }
+  .grid-auto-cols-auto {
+    grid-auto-columns: auto;
+  }
+  .grid-auto-cols-min {
+    grid-auto-columns: min-content;
+  }
+  .grid-auto-cols-max {
+    grid-auto-columns: max-content;
+  }
+  .grid-auto-cols {
+    grid-auto-columns: minmax(0, 1fr);
+  }
+  .grid-auto-flow-rows {
+    grid-auto-flow: row;
+  }
+  .grid-auto-rows-auto {
+    grid-auto-rows: auto;
+  }
+  .grid-auto-rows-min {
+    grid-auto-rows: min-content;
+  }
+  .grid-auto-rows-max {
+    grid-auto-rows: max-content;
+  }
+  .grid-auto-rows {
+    grid-auto-rows: minmax(0, 1fr);
   }
 
-  .grid-xl-v {
-    display: grid;
-    flex-direction: column;
+  .grid-inline {
+    display: inline-grid;
   }
-  .grid-xl-v > .grid-main {
-    flex: 1 1 0;
-    max-height: 100%;
+
+  /* template-columns */
+  .grid-cols-1 {
+    grid-template-columns: repeat(1, minmax(0, 1fr));
   }
-  .grid-xl-v.align-middle, .grid-xl-v.grid-align-middle {
-    justify-content: center;
+
+  .grid-cols-2 {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
   }
 
-  .grid-xl-h > *:not(.grid-main),
-.grid-xl-v > *:not(.grid-main) {
-    flex: 0 0 auto;
+  .grid-cols-3 {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
   }
-  .grid-xl-h.grid-inline,
-.grid-xl-v.grid-inline {
-    display: inline-grid;
+
+  .grid-cols-4 {
+    grid-template-columns: repeat(4, minmax(0, 1fr));
+  }
+
+  .grid-cols-5 {
+    grid-template-columns: repeat(5, minmax(0, 1fr));
   }
 
-  /** raw css properties distribution */
-  .grid-xl-h.grid-wrap,
-.grid-xl-v.grid-wrap {
-    flex-wrap: wrap;
+  .grid-cols-6 {
+    grid-template-columns: repeat(6, minmax(0, 1fr));
   }
-  .grid-xl-h.grid-wrap-reverse,
-.grid-xl-v.grid-wrap-reverse {
-    flex-wrap: wrap-reverse;
+
+  .grid-cols-7 {
+    grid-template-columns: repeat(7, minmax(0, 1fr));
   }
-  .grid-xl-h .self-start,
-.grid-xl-v .self-start {
-    align-self: flex-start;
+
+  .grid-cols-8 {
+    grid-template-columns: repeat(8, minmax(0, 1fr));
   }
-  .grid-xl-h .self-end,
-.grid-xl-v .self-end {
-    align-self: flex-end;
+
+  .grid-cols-9 {
+    grid-template-columns: repeat(9, minmax(0, 1fr));
   }
-  .grid-xl-h .self-stretch,
-.grid-xl-v .self-stretch {
-    align-self: stretch;
+
+  .grid-cols-10 {
+    grid-template-columns: repeat(10, minmax(0, 1fr));
+  }
+
+  .grid-cols-11 {
+    grid-template-columns: repeat(11, minmax(0, 1fr));
+  }
+
+  .grid-cols-12 {
+    grid-template-columns: repeat(12, minmax(0, 1fr));
+  }
+
+  /* template-rows */
+  .grid-rows-1 {
+    grid-template-rows: repeat(1, minmax(0, 1fr));
+  }
+
+  .grid-rows-2 {
+    grid-template-rows: repeat(2, minmax(0, 1fr));
+  }
+
+  .grid-rows-3 {
+    grid-template-rows: repeat(3, minmax(0, 1fr));
+  }
+
+  .grid-rows-4 {
+    grid-template-rows: repeat(4, minmax(0, 1fr));
+  }
+
+  .grid-rows-5 {
+    grid-template-rows: repeat(5, minmax(0, 1fr));
+  }
+
+  .grid-rows-6 {
+    grid-template-rows: repeat(6, minmax(0, 1fr));
+  }
+
+  .grid-rows-7 {
+    grid-template-rows: repeat(7, minmax(0, 1fr));
+  }
+
+  .grid-rows-8 {
+    grid-template-rows: repeat(8, minmax(0, 1fr));
   }
 }
-@media only screen and (max-width: 64rem) {
-  .grid-lg-h {
+@media only screen and (max-width: 960px) {
+  .grid {
     display: grid;
-    flex-direction: row;
   }
-  .grid-lg-h > .grid-main {
-    flex: 1 1 0;
+  .grid-auto-flow-cols {
+    grid-auto-flow: column;
+  }
+  .grid-auto-cols-auto {
+    grid-auto-columns: auto;
+  }
+  .grid-auto-cols-min {
+    grid-auto-columns: min-content;
+  }
+  .grid-auto-cols-max {
+    grid-auto-columns: max-content;
+  }
+  .grid-auto-cols {
+    grid-auto-columns: minmax(0, 1fr);
+  }
+  .grid-auto-flow-rows {
+    grid-auto-flow: row;
+  }
+  .grid-auto-rows-auto {
+    grid-auto-rows: auto;
+  }
+  .grid-auto-rows-min {
+    grid-auto-rows: min-content;
+  }
+  .grid-auto-rows-max {
+    grid-auto-rows: max-content;
+  }
+  .grid-auto-rows {
+    grid-auto-rows: minmax(0, 1fr);
   }
 
-  .grid-lg-v {
-    display: grid;
-    flex-direction: column;
+  .grid-inline {
+    display: inline-grid;
+  }
+
+  /* template-columns */
+  .grid-cols-1 {
+    grid-template-columns: repeat(1, minmax(0, 1fr));
   }
-  .grid-lg-v > .grid-main {
-    flex: 1 1 0;
-    max-height: 100%;
+
+  .grid-cols-2 {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
   }
-  .grid-lg-v.align-middle, .grid-lg-v.grid-align-middle {
-    justify-content: center;
+
+  .grid-cols-3 {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
   }
 
-  .grid-lg-h > *:not(.grid-main),
-.grid-lg-v > *:not(.grid-main) {
-    flex: 0 0 auto;
+  .grid-cols-4 {
+    grid-template-columns: repeat(4, minmax(0, 1fr));
   }
-  .grid-lg-h.grid-inline,
-.grid-lg-v.grid-inline {
-    display: inline-grid;
+
+  .grid-cols-5 {
+    grid-template-columns: repeat(5, minmax(0, 1fr));
+  }
+
+  .grid-cols-6 {
+    grid-template-columns: repeat(6, minmax(0, 1fr));
+  }
+
+  .grid-cols-7 {
+    grid-template-columns: repeat(7, minmax(0, 1fr));
+  }
+
+  .grid-cols-8 {
+    grid-template-columns: repeat(8, minmax(0, 1fr));
+  }
+
+  .grid-cols-9 {
+    grid-template-columns: repeat(9, minmax(0, 1fr));
   }
 
-  /** raw css properties distribution */
-  .grid-lg-h.grid-wrap,
-.grid-lg-v.grid-wrap {
-    flex-wrap: wrap;
+  .grid-cols-10 {
+    grid-template-columns: repeat(10, minmax(0, 1fr));
   }
-  .grid-lg-h.grid-wrap-reverse,
-.grid-lg-v.grid-wrap-reverse {
-    flex-wrap: wrap-reverse;
+
+  .grid-cols-11 {
+    grid-template-columns: repeat(11, minmax(0, 1fr));
   }
-  .grid-lg-h .self-start,
-.grid-lg-v .self-start {
-    align-self: flex-start;
+
+  .grid-cols-12 {
+    grid-template-columns: repeat(12, minmax(0, 1fr));
   }
-  .grid-lg-h .self-end,
-.grid-lg-v .self-end {
-    align-self: flex-end;
+
+  /* template-rows */
+  .grid-rows-1 {
+    grid-template-rows: repeat(1, minmax(0, 1fr));
   }
-  .grid-lg-h .self-stretch,
-.grid-lg-v .self-stretch {
-    align-self: stretch;
+
+  .grid-rows-2 {
+    grid-template-rows: repeat(2, minmax(0, 1fr));
+  }
+
+  .grid-rows-3 {
+    grid-template-rows: repeat(3, minmax(0, 1fr));
+  }
+
+  .grid-rows-4 {
+    grid-template-rows: repeat(4, minmax(0, 1fr));
+  }
+
+  .grid-rows-5 {
+    grid-template-rows: repeat(5, minmax(0, 1fr));
+  }
+
+  .grid-rows-6 {
+    grid-template-rows: repeat(6, minmax(0, 1fr));
+  }
+
+  .grid-rows-7 {
+    grid-template-rows: repeat(7, minmax(0, 1fr));
+  }
+
+  .grid-rows-8 {
+    grid-template-rows: repeat(8, minmax(0, 1fr));
   }
 }
-@media only screen and (max-width: 48rem) {
-  .grid-md-h {
+@media only screen and (max-width: 760px) {
+  .grid {
     display: grid;
-    flex-direction: row;
   }
-  .grid-md-h > .grid-main {
-    flex: 1 1 0;
+  .grid-auto-flow-cols {
+    grid-auto-flow: column;
+  }
+  .grid-auto-cols-auto {
+    grid-auto-columns: auto;
+  }
+  .grid-auto-cols-min {
+    grid-auto-columns: min-content;
+  }
+  .grid-auto-cols-max {
+    grid-auto-columns: max-content;
+  }
+  .grid-auto-cols {
+    grid-auto-columns: minmax(0, 1fr);
+  }
+  .grid-auto-flow-rows {
+    grid-auto-flow: row;
+  }
+  .grid-auto-rows-auto {
+    grid-auto-rows: auto;
+  }
+  .grid-auto-rows-min {
+    grid-auto-rows: min-content;
+  }
+  .grid-auto-rows-max {
+    grid-auto-rows: max-content;
+  }
+  .grid-auto-rows {
+    grid-auto-rows: minmax(0, 1fr);
   }
 
-  .grid-md-v {
-    display: grid;
-    flex-direction: column;
+  .grid-inline {
+    display: inline-grid;
   }
-  .grid-md-v > .grid-main {
-    flex: 1 1 0;
-    max-height: 100%;
+
+  /* template-columns */
+  .grid-cols-1 {
+    grid-template-columns: repeat(1, minmax(0, 1fr));
   }
-  .grid-md-v.align-middle, .grid-md-v.grid-align-middle {
-    justify-content: center;
+
+  .grid-cols-2 {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
   }
 
-  .grid-md-h > *:not(.grid-main),
-.grid-md-v > *:not(.grid-main) {
-    flex: 0 0 auto;
+  .grid-cols-3 {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
   }
-  .grid-md-h.grid-inline,
-.grid-md-v.grid-inline {
-    display: inline-grid;
+
+  .grid-cols-4 {
+    grid-template-columns: repeat(4, minmax(0, 1fr));
+  }
+
+  .grid-cols-5 {
+    grid-template-columns: repeat(5, minmax(0, 1fr));
+  }
+
+  .grid-cols-6 {
+    grid-template-columns: repeat(6, minmax(0, 1fr));
+  }
+
+  .grid-cols-7 {
+    grid-template-columns: repeat(7, minmax(0, 1fr));
+  }
+
+  .grid-cols-8 {
+    grid-template-columns: repeat(8, minmax(0, 1fr));
+  }
+
+  .grid-cols-9 {
+    grid-template-columns: repeat(9, minmax(0, 1fr));
+  }
+
+  .grid-cols-10 {
+    grid-template-columns: repeat(10, minmax(0, 1fr));
+  }
+
+  .grid-cols-11 {
+    grid-template-columns: repeat(11, minmax(0, 1fr));
+  }
+
+  .grid-cols-12 {
+    grid-template-columns: repeat(12, minmax(0, 1fr));
+  }
+
+  /* template-rows */
+  .grid-rows-1 {
+    grid-template-rows: repeat(1, minmax(0, 1fr));
   }
 
-  /** raw css properties distribution */
-  .grid-md-h.grid-wrap,
-.grid-md-v.grid-wrap {
-    flex-wrap: wrap;
+  .grid-rows-2 {
+    grid-template-rows: repeat(2, minmax(0, 1fr));
   }
-  .grid-md-h.grid-wrap-reverse,
-.grid-md-v.grid-wrap-reverse {
-    flex-wrap: wrap-reverse;
+
+  .grid-rows-3 {
+    grid-template-rows: repeat(3, minmax(0, 1fr));
   }
-  .grid-md-h .self-start,
-.grid-md-v .self-start {
-    align-self: flex-start;
+
+  .grid-rows-4 {
+    grid-template-rows: repeat(4, minmax(0, 1fr));
   }
-  .grid-md-h .self-end,
-.grid-md-v .self-end {
-    align-self: flex-end;
+
+  .grid-rows-5 {
+    grid-template-rows: repeat(5, minmax(0, 1fr));
   }
-  .grid-md-h .self-stretch,
-.grid-md-v .self-stretch {
-    align-self: stretch;
+
+  .grid-rows-6 {
+    grid-template-rows: repeat(6, minmax(0, 1fr));
+  }
+
+  .grid-rows-7 {
+    grid-template-rows: repeat(7, minmax(0, 1fr));
+  }
+
+  .grid-rows-8 {
+    grid-template-rows: repeat(8, minmax(0, 1fr));
   }
 }
-@media only screen and (max-width: 35.7rem) {
-  .grid-sm-h {
+@media only screen and (max-width: 0px) {
+  .grid {
     display: grid;
-    flex-direction: row;
   }
-  .grid-sm-h > .grid-main {
-    flex: 1 1 0;
+  .grid-auto-flow-cols {
+    grid-auto-flow: column;
+  }
+  .grid-auto-cols-auto {
+    grid-auto-columns: auto;
+  }
+  .grid-auto-cols-min {
+    grid-auto-columns: min-content;
+  }
+  .grid-auto-cols-max {
+    grid-auto-columns: max-content;
+  }
+  .grid-auto-cols {
+    grid-auto-columns: minmax(0, 1fr);
+  }
+  .grid-auto-flow-rows {
+    grid-auto-flow: row;
+  }
+  .grid-auto-rows-auto {
+    grid-auto-rows: auto;
+  }
+  .grid-auto-rows-min {
+    grid-auto-rows: min-content;
+  }
+  .grid-auto-rows-max {
+    grid-auto-rows: max-content;
+  }
+  .grid-auto-rows {
+    grid-auto-rows: minmax(0, 1fr);
   }
 
-  .grid-sm-v {
-    display: grid;
-    flex-direction: column;
+  .grid-inline {
+    display: inline-grid;
   }
-  .grid-sm-v > .grid-main {
-    flex: 1 1 0;
-    max-height: 100%;
+
+  /* template-columns */
+  .grid-cols-1 {
+    grid-template-columns: repeat(1, minmax(0, 1fr));
   }
-  .grid-sm-v.align-middle, .grid-sm-v.grid-align-middle {
-    justify-content: center;
+
+  .grid-cols-2 {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
   }
 
-  .grid-sm-h > *:not(.grid-main),
-.grid-sm-v > *:not(.grid-main) {
-    flex: 0 0 auto;
+  .grid-cols-3 {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
   }
-  .grid-sm-h.grid-inline,
-.grid-sm-v.grid-inline {
-    display: inline-grid;
+
+  .grid-cols-4 {
+    grid-template-columns: repeat(4, minmax(0, 1fr));
   }
 
-  /** raw css properties distribution */
-  .grid-sm-h.grid-wrap,
-.grid-sm-v.grid-wrap {
-    flex-wrap: wrap;
+  .grid-cols-5 {
+    grid-template-columns: repeat(5, minmax(0, 1fr));
   }
-  .grid-sm-h.grid-wrap-reverse,
-.grid-sm-v.grid-wrap-reverse {
-    flex-wrap: wrap-reverse;
+
+  .grid-cols-6 {
+    grid-template-columns: repeat(6, minmax(0, 1fr));
   }
-  .grid-sm-h .self-start,
-.grid-sm-v .self-start {
-    align-self: flex-start;
+
+  .grid-cols-7 {
+    grid-template-columns: repeat(7, minmax(0, 1fr));
   }
-  .grid-sm-h .self-end,
-.grid-sm-v .self-end {
-    align-self: flex-end;
+
+  .grid-cols-8 {
+    grid-template-columns: repeat(8, minmax(0, 1fr));
+  }
+
+  .grid-cols-9 {
+    grid-template-columns: repeat(9, minmax(0, 1fr));
+  }
+
+  .grid-cols-10 {
+    grid-template-columns: repeat(10, minmax(0, 1fr));
+  }
+
+  .grid-cols-11 {
+    grid-template-columns: repeat(11, minmax(0, 1fr));
+  }
+
+  .grid-cols-12 {
+    grid-template-columns: repeat(12, minmax(0, 1fr));
+  }
+
+  /* template-rows */
+  .grid-rows-1 {
+    grid-template-rows: repeat(1, minmax(0, 1fr));
+  }
+
+  .grid-rows-2 {
+    grid-template-rows: repeat(2, minmax(0, 1fr));
+  }
+
+  .grid-rows-3 {
+    grid-template-rows: repeat(3, minmax(0, 1fr));
+  }
+
+  .grid-rows-4 {
+    grid-template-rows: repeat(4, minmax(0, 1fr));
+  }
+
+  .grid-rows-5 {
+    grid-template-rows: repeat(5, minmax(0, 1fr));
+  }
+
+  .grid-rows-6 {
+    grid-template-rows: repeat(6, minmax(0, 1fr));
   }
-  .grid-sm-h .self-stretch,
-.grid-sm-v .self-stretch {
-    align-self: stretch;
+
+  .grid-rows-7 {
+    grid-template-rows: repeat(7, minmax(0, 1fr));
+  }
+
+  .grid-rows-8 {
+    grid-template-rows: repeat(8, minmax(0, 1fr));
   }
 }