Merge pull request #6 from IBM/5-stretching-rows

fix(scss): switch fixed rows to minmax for dynamic content
IBM · Jan 24, 2018 · 6e7e37f · 6e7e37f
2 parents ed82d7e + 358f852
commit 6e7e37f
Show file tree

Hide file tree

Showing 21 changed files with 46 additions and 28 deletions.
diff --git a/bin/src/scss/_core.scss b/bin/src/scss/_core.scss
@@ -91,7 +91,7 @@ body {
       @include gridLegacyWrapper($includeFlexFallback) {
         @include gridColumns($breakpoint, $first, $last) {
           display: grid;
-          grid-auto-rows: $rowHeight * 1rem;
+          grid-auto-rows: minmax($rowHeight * 1rem, min-content);
         }
         @include gridVariables($breakpoint, $first, $rows, $rowHeight);
       }

diff --git a/examples/bootstrap/css-gridish/bootstrap-grid.sketch b/examples/bootstrap/css-gridish/bootstrap-grid.sketch
diff --git a/examples/bootstrap/css-gridish/css/bootstrap-grid-legacy.css b/examples/bootstrap/css-gridish/css/bootstrap-grid-legacy.css
@@ -276,7 +276,7 @@ body {
 @supports (display: grid) {
   .bootstrap-grid {
     display: grid;
-    grid-auto-rows: 1rem;
+    grid-auto-rows: minmax(1rem, min-content);
     grid-template-columns: repeat(auto-fill, 8.33333vw); }
     .bootstrap-grid.bootstrap-grid--fixed-columns {
       grid-template-columns: repeat(auto-fill, 3rem); }

diff --git a/examples/bootstrap/css-gridish/css/bootstrap-grid-legacy.min.css b/examples/bootstrap/css-gridish/css/bootstrap-grid-legacy.min.css
diff --git a/examples/bootstrap/css-gridish/css/bootstrap-grid.css b/examples/bootstrap/css-gridish/css/bootstrap-grid.css
@@ -57,7 +57,7 @@ body {
 
 .bootstrap-grid {
   display: grid;
-  grid-auto-rows: 1rem;
+  grid-auto-rows: minmax(1rem, min-content);
   grid-template-columns: repeat(auto-fill, 8.33333vw); }
   .bootstrap-grid.bootstrap-grid--fixed-columns {
     grid-template-columns: repeat(auto-fill, 3rem); }

diff --git a/examples/bootstrap/css-gridish/css/bootstrap-grid.min.css b/examples/bootstrap/css-gridish/css/bootstrap-grid.min.css
diff --git a/examples/bootstrap/css-gridish/scss/_core.scss b/examples/bootstrap/css-gridish/scss/_core.scss
@@ -91,7 +91,7 @@ body {
       @include gridLegacyWrapper($includeFlexFallback) {
         @include gridColumns($breakpoint, $first, $last) {
           display: grid;
-          grid-auto-rows: $rowHeight * 1rem;
+          grid-auto-rows: minmax($rowHeight * 1rem, min-content);
         }
         @include gridVariables($breakpoint, $first, $rows, $rowHeight);
       }

diff --git a/examples/carbon/css-gridish/bx-grid.sketch b/examples/carbon/css-gridish/bx-grid.sketch
diff --git a/examples/carbon/css-gridish/css/bx-grid-legacy.css b/examples/carbon/css-gridish/css/bx-grid-legacy.css
@@ -301,7 +301,7 @@ body {
 @supports (display: grid) {
   .bx-grid {
     display: grid;
-    grid-auto-rows: 0.5rem;
+    grid-auto-rows: minmax(0.5rem, min-content);
     grid-template-columns: repeat(auto-fill, calc(8.33333vw - 0.83333vw)); }
     .bx-grid.bx-grid--fixed-columns {
       grid-template-columns: repeat(auto-fill, 1.66667rem); }