fix: change box-sizing for all grid items

lazarljubenovic · Mar 19, 2017 · 0831459 · 0831459
1 parent 72165c5
commit 0831459
Show file tree

Hide file tree

Showing 6 changed files with 30 additions and 15 deletions.
diff --git a/bundle.scss b/bundle.scss
@@ -586,6 +586,7 @@
     > * {
       width: $width;
       margin-bottom: $gutter-height;
+      box-sizing: border-box;
 
       @if not $dangling-at-beginning {
         &:not(:nth-child(#{$n}n)) {
@@ -678,7 +679,7 @@
     // because there can be no dangling elements here. We just let it all flow.
     display: flex;
     flex-direction: column;
-    > * { width: 100% }
+    > * { width: 100%; box-sizing: border-box }
     > :not(:last-child) { margin-bottom: $gutter-height }
   }
 }
@@ -1235,6 +1236,8 @@
   display: flex;
   flex-wrap: wrap;
 
+  > * { box-sizing: border-box }
+
   @each $row in $spec {
     @if type-of($row) == string {
       // A string-type spec, in form of 'x-x x'

diff --git a/casper/casper.scss b/casper/casper.scss
@@ -31,7 +31,10 @@ section {
 #fixed-grid-1 { @include fixed-grid(1) }
 [id^=fixed-grid-3-] { @include fixed-grid(3) }
 [id^=fixed-grid-dd-3-] {
-  @include fixed-grid(3, $distribute-dangling: true)
+  @include fixed-grid(3, $distribute-dangling: true);
+  > * {
+    padding: .2em;
+  }
 }
 [id^=fixed-grid-dd-dab-3-] {
   @include fixed-grid(

diff --git a/src/_fixed-grid.scss b/src/_fixed-grid.scss
@@ -85,6 +85,7 @@
     > * {
       width: $width;
       margin-bottom: $gutter-height;
+      box-sizing: border-box;
 
       @if not $dangling-at-beginning {
         &:not(:nth-child(#{$n}n)) {
@@ -177,7 +178,7 @@
     // because there can be no dangling elements here. We just let it all flow.
     display: flex;
     flex-direction: column;
-    > * { width: 100% }
+    > * { width: 100%; box-sizing: border-box }
     > :not(:last-child) { margin-bottom: $gutter-height }
   }
 }
diff --git a/src/_grid.scss b/src/_grid.scss
@@ -129,6 +129,8 @@
   display: flex;
   flex-wrap: wrap;
 
+  > * { box-sizing: border-box }
+
   @each $row in $spec {
     @if type-of($row) == string {
       // A string-type spec, in form of 'x-x x'

diff --git a/test/_fixed-grid.spec.scss b/test/_fixed-grid.spec.scss
@@ -11,7 +11,7 @@
         }
         @include expect {
           display: flex; flex-direction: column;
-          > * { width: 100% }
+          > * { width: 100%; box-sizing: border-box }
           > :not(:last-child) { margin-bottom: 1em }
         }
       }
@@ -23,7 +23,7 @@
         }
         @include expect {
           display: flex; flex-wrap: wrap;
-          > * { width: calc((100% - 1em) / 2); margin-bottom: 1em }
+          > * { width: calc((100% - 1em) / 2); margin-bottom: 1em; box-sizing: border-box }
           > *:not(:nth-child(2n)) { margin-right: 1em }
           > *:nth-last-child(1):nth-child(2n + 1) { margin-bottom: 0 }
           > *:nth-last-child(2):nth-child(2n + 1) { margin-bottom: 0 }
@@ -38,7 +38,7 @@
         }
         @include expect {
           display: flex; flex-wrap: wrap;
-          > * { width: calc((100% - 2em) / 3); margin-bottom: 1em }
+          > * { width: calc((100% - 2em) / 3); margin-bottom: 1em; box-sizing: border-box }
           > *:not(:nth-child(3n)) { margin-right: 1em }
           > *:nth-last-child(1):nth-child(3n + 1) { margin-bottom: 0 }
           > *:nth-last-child(2):nth-child(3n + 1) { margin-bottom: 0 }
@@ -56,7 +56,7 @@
         }
         @include expect {
           display: flex; flex-wrap: wrap;
-          > * { width: calc((100% - 3em) / 4); margin-bottom: 1em }
+          > * { width: calc((100% - 3em) / 4); margin-bottom: 1em; box-sizing: border-box }
           > *:not(:nth-child(4n)) { margin-right: 1em }
           > *:nth-last-child(1):nth-child(4n + 1) { margin-bottom: 0 }
           > *:nth-last-child(2):nth-child(4n + 1) { margin-bottom: 0 }
@@ -81,7 +81,7 @@
         }
         @include expect {
           display: flex; flex-direction: column;
-          > * { width: 100% }
+          > * { width: 100%; box-sizing: border-box }
           > :not(:last-child) { margin-bottom: 1em }
         }
       }
@@ -93,7 +93,7 @@
         }
         @include expect {
           display: flex; flex-wrap: wrap;
-          > * { width: calc((100% - 1em) / 2); margin-bottom: 1em }
+          > * { width: calc((100% - 1em) / 2); margin-bottom: 1em; box-sizing: border-box }
           > *:not(:nth-child(2n)) { margin-right: 1em }
           > *:nth-last-child(1):nth-child(2n + 1) { margin-bottom: 0 }
           > *:nth-last-child(2):nth-child(2n + 1) { margin-bottom: 0 }
@@ -112,7 +112,7 @@
         }
         @include expect {
           display: flex; flex-wrap: wrap;
-          > * { width: calc((100% - 2em) / 3); margin-bottom: 1em }
+          > * { width: calc((100% - 2em) / 3); margin-bottom: 1em; box-sizing: border-box }
           > *:not(:nth-child(3n)) { margin-right: 1em }
           > *:nth-last-child(1):nth-child(3n + 1) { margin-bottom: 0 }
           > *:nth-last-child(2):nth-child(3n + 1) { margin-bottom: 0 }
@@ -137,7 +137,7 @@
         }
         @include expect {
           display: flex; flex-wrap: wrap;
-          > * { width: calc((100% - 3em) / 4); margin-bottom: 1em }
+          > * { width: calc((100% - 3em) / 4); margin-bottom: 1em; box-sizing: border-box }
           > *:not(:nth-child(4n)) { margin-right: 1em }
           > *:nth-last-child(1):nth-child(4n + 1) { margin-bottom: 0 }
           > *:nth-last-child(2):nth-child(4n + 1) { margin-bottom: 0 }
@@ -173,7 +173,7 @@
         }
         @include expect {
           display: flex; flex-direction: column;
-          > * { width: 100% }
+          > * { width: 100%; box-sizing: border-box }
           > :not(:last-child) { margin-bottom: 1em }
         }
       }
@@ -185,7 +185,7 @@
         }
         @include expect {
           display: flex; flex-wrap: wrap;
-          > * { width: calc((100% - 1em) / 2); margin-bottom: 1em }
+          > * { width: calc((100% - 1em) / 2); margin-bottom: 1em; box-sizing: border-box }
           > *:not(:nth-last-child(2n + 1)) { margin-right: 1em }
           > *:nth-last-child(1):nth-child(2n + 1) { margin-bottom: 0 }
           > *:nth-last-child(2):nth-child(2n + 1) { margin-bottom: 0 }
@@ -208,7 +208,7 @@
         }
         @include expect {
           display: flex; flex-wrap: wrap;
-          > * { width: calc((100% - 2em) / 3); margin-bottom: 1em }
+          > * { width: calc((100% - 2em) / 3); margin-bottom: 1em; box-sizing: border-box }
           > *:not(:nth-last-child(3n + 1)) { margin-right: 1em }
           > *:nth-last-child(1):nth-child(3n + 1) { margin-bottom: 0 }
           > *:nth-last-child(2):nth-child(3n + 1) { margin-bottom: 0 }
@@ -241,7 +241,7 @@
         }
         @include expect {
           display: flex; flex-wrap: wrap;
-          > * { width: calc((100% - 3em) / 4); margin-bottom: 1em }
+          > * { width: calc((100% - 3em) / 4); margin-bottom: 1em; box-sizing: border-box }
           > *:not(:nth-last-child(4n + 1)) { margin-right: 1em }
           > *:nth-last-child(1):nth-child(4n + 1) { margin-bottom: 0 }
           > *:nth-last-child(2):nth-child(4n + 1) { margin-bottom: 0 }

diff --git a/test/_grid.spec.scss b/test/_grid.spec.scss
@@ -15,6 +15,7 @@
         }
         @include expect {
           display: flex; flex-wrap: wrap;
+          > * { box-sizing: border-box }
           > :nth-child(1) { width: calc(1 * calc(calc((100% - 2em) / 3) + 1em) - 1em); margin-bottom: 1em; margin-right: 1em }
           > :nth-child(2) { width: calc(2 * calc(calc((100% - 2em) / 3) + 1em) - 1em); margin-bottom: 1em }
           > :nth-child(3) { width: calc(2 * calc(calc((100% - 2em) / 3) + 1em) - 1em); margin-right: 1em }
@@ -35,6 +36,7 @@
         }
         @include expect {
           display: flex; flex-wrap: wrap;
+          > * { box-sizing: border-box }
           > :nth-child(1) { width: calc(3 * calc(calc((100% - 5em) / 6) + 1em) - 1em); margin-bottom: 1em; margin-right: 1em }
           > :nth-child(2) { width: calc(2 * calc(calc((100% - 5em) / 6) + 1em) - 1em); margin-bottom: 1em; margin-right: 1em }
           > :nth-child(3) { width: calc(1 * calc(calc((100% - 5em) / 6) + 1em) - 1em); margin-bottom: 1em }
@@ -55,6 +57,7 @@
         }
         @include expect {
           display: flex; flex-wrap: wrap;
+          > * { box-sizing: border-box }
           > :nth-child(1) { width: calc(1 * calc(calc((100% - 2em) / 3) + 1em) - 1em); margin-right: 1em }
           > :nth-child(2) { width: calc(1 * calc(calc((100% - 2em) / 3) + 1em) - 1em); margin-right: 1em }
           > :nth-child(3) { width: calc(1 * calc(calc((100% - 2em) / 3) + 1em) - 1em) }
@@ -77,6 +80,7 @@
         }
         @include expect {
           display: flex; flex-wrap: wrap;
+          > * { box-sizing: border-box }
           > :nth-child(1) { width: calc((100% - 0em) / 1); margin-bottom: 1em }
           > :nth-child(2) { width: calc((100% - 1em) / 2); margin-right: 1em; margin-bottom: 1em }
           > :nth-child(3) { width: calc((100% - 1em) / 2); margin-bottom: 1em }
@@ -98,6 +102,7 @@
         }
         @include expect {
           display: flex; flex-wrap: wrap;
+          > * { box-sizing: border-box }
           > :nth-child(1) { width: calc((100% - 1em) / 2); margin-right: 1em }
           > :nth-child(2) { width: calc((100% - 1em) / 2) }
         }
@@ -118,6 +123,7 @@
         }
         @include expect {
           display: flex; flex-wrap: wrap;
+          > * { box-sizing: border-box }
           > :nth-child(1) { width: calc(1 * calc(calc((100% - 4em) / 5) + 1em) - 1em); margin-bottom: 1em; margin-right: 1em }
           > :nth-child(2) { width: calc(2 * calc(calc((100% - 4em) / 5) + 1em) - 1em); margin-bottom: 1em; margin-right: 1em }
           > :nth-child(3) { width: calc(2 * calc(calc((100% - 4em) / 5) + 1em) - 1em); margin-bottom: 1em }