fix(grid): incorrect margins in compact and very compact grid

Compact and very compact grids had the same margin as the normal grid when they should have had smaller margins. In addition, the layout was working differently for a normal grid vs compact/very compact grids and these changes makes all the grids work consistently.

Author: mareeo

src/definitions/collections/grid.less

@@ -1868,6 +1868,10 @@ each(@colors, {
         Compact
   -----------------*/
 
+  .ui.ui.ui.compact.grid {
+    margin: -(@compactGutterWidth / 2);
+  }
+
   .ui.ui.ui.compact.grid > .column:not(.row),
   .ui.ui.ui.compact.grid > .row > .column {
     padding-left: (@compactGutterWidth / 2);
@@ -1883,6 +1887,8 @@ each(@colors, {
   .ui.ui.ui.compact.grid > .row {
     padding-top: (@compactRowSpacing / 2);
     padding-bottom: (@compactRowSpacing / 2);
+    padding-left: 0;
+    padding-right: 0;
   }
 
   /* Columns */
@@ -1906,6 +1912,10 @@ each(@colors, {
       Very compact
   -----------------*/
 
+  .ui.ui.ui[class*="very compact"].grid {
+    margin: -(@veryCompactGutterWidth / 2);
+  }
+
   .ui.ui.ui[class*="very compact"].grid > .column:not(.row),
   .ui.ui.ui[class*="very compact"].grid > .row > .column {
     padding-left: (@veryCompactGutterWidth / 2);
@@ -1921,8 +1931,8 @@ each(@colors, {
   .ui.ui.ui[class*="very compact"].grid > .row {
     padding-top: (@veryCompactRowSpacing / 2);
     padding-bottom: (@veryCompactRowSpacing / 2);
-    padding-left: (@veryCompactGutterWidth * 1.5);
-    padding-right: (@veryCompactGutterWidth * 1.5);
+    padding-left: 0;
+    padding-right: 0;
   }
 
   /* Columns */