fix(grid): collapse vertical gutters

fixes #11408 (cherry picked from commit c3ba5bd)
vuetifyjs · Dec 23, 2020 · d0f25fc · d0f25fc · hmawla · Jan 2, 2021
1 parent ed46cfb
commit d0f25fc
Show file tree

Hide file tree

Showing 2 changed files with 3 additions and 6 deletions.
diff --git a/packages/vuetify/src/components/VGrid/VGrid.sass b/packages/vuetify/src/components/VGrid/VGrid.sass
@@ -15,8 +15,7 @@
   +make-row
 
   &--dense
-    margin-right: -$form-grid-gutter / 2
-    margin-left: -$form-grid-gutter / 2
+    margin: -$form-grid-gutter / 2
 
     > .col,
     > [class*="col-"]
@@ -25,8 +24,7 @@
 // Remove the negative margin from default .row, then the horizontal padding
 // from all immediate children columns (to prevent runaway style inheritance).
 .no-gutters
-  margin-right: 0
-  margin-left: 0
+  margin: 0
   > .col,
   > [class*="col-"]
     padding: 0

diff --git a/packages/vuetify/src/components/VGrid/_mixins.sass b/packages/vuetify/src/components/VGrid/_mixins.sass
@@ -14,8 +14,7 @@
   display: flex
   flex-wrap: wrap
   flex: 1 1 auto
-  margin-right: -$gutter / 2
-  margin-left: -$gutter / 2
+  margin: -$gutter / 2
 
 =make-col-ready($gutter: $grid-gutter)
   // Prevent columns from becoming too narrow when at smaller grid tiers by