fix margin & padding for grid system

pixu1980 · Mar 27, 2018 · 20a7a2d · 20a7a2d
1 parent 17b953c
commit 20a7a2d
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 10 deletions.
diff --git a/scss/grid-system/grid-system.scss b/scss/grid-system/grid-system.scss
@@ -69,7 +69,7 @@
   #{array-join($columns-selectors)} {
     @include position(relative);
     @include display(inline-block);
-    @include padding(null $column-padding-right null $column-padding-right);
+    @include padding(null $padding-right null $padding-right);
     @include reset-inline-block;
 
     min-height: 1px; // Prevent columns from collapsing when empty
@@ -81,17 +81,11 @@
 @mixin grid-system($columns: $columns-default, $gutter: $gutter-default) {
   // Grid system
   // --------------------------------------------------
-  $row-margin-left: ceil(($gutter / -2));
-  $row-margin-right: floor(($gutter / -2));
-
-  $column-padding-left: ceil(($gutter / 2));
-  $column-padding-right: floor(($gutter / 2));
-
   %container-base {
     // container-base
     @include display(block);
     @include box-size(100% auto);
-    @include padding(0 $column-padding-right 0 $column-padding-left);
+    @include padding(0 $padding-right 0 $padding-left);
     @include margin(0 auto);
   }
 
@@ -115,12 +109,12 @@
     //
     // Rows contain and clear the floats of your columns.
     @include display(block);
-    @include margin(0 $row-margin-right 0 $row-margin-left);
+    @include margin(0 $margin-right 0 $margin-left);
 
     + .row {
       @include margin($gutter null null null);
     }
   }
 
-  @include columns($columns, $gutter);
+  @include columns($columns, $gutter, $padding-right, $padding-left);
 }
diff --git a/scss/variables.scss b/scss/variables.scss
@@ -24,3 +24,9 @@ $columns-breakpoints: array-concat((
   ipp: 414px, // iphone plus (since iphone5)
   xs: 576px // extra small devices
 ), $common-breakpoints) !default; // columns-breakpoints used for media queries and column classes sizes & positions
+
+$margin-left: ceil($gutter / -2);
+$margin-right: floor($gutter / -2);
+
+$padding-left: ceil($gutter / 2);
+$padding-right: floor($gutter / 2);