Fix background colors with grids

src/definitions/collections/grid.less

@@ -127,11 +127,20 @@
     Loose Coupling
 --------------------*/
 
+/* Collapse Margin */
+.ui.grid > .ui.grid:first-child {
+  margin-top: 0em;
+}
+.ui.grid > .ui.grid:last-child {
+  margin-bottom: 0em;
+}
+
+/* Place Divider */
 .ui.grid .row + .ui.divider {
   margin: (@rowSpacing / 2) (@gutterWidth / 2);
 }
 
-/* remove Border on last horizontal segment */
+/* Remove border on last horizontal segment */
 .ui.grid > .row > .column:last-child > .horizontal.segment,
 .ui.grid > .column:last-child > .horizontal.segment {
   box-shadow: none;
@@ -146,21 +155,7 @@
        Page Grid
 -------------------------*/
 
-.ui.page.grid {
-  padding-left: @computerGutter;
-  padding-right: @computerGutter;
-  width: @computerWidth;
-}
-
-/* Collapse Margin */
-.ui.grid > .ui.grid:first-child {
-  margin-top: 0em;
-}
-.ui.grid > .ui.grid:last-child {
-  margin-bottom: 0em;
-}
-
-@media only screen and (max-width: (@largestMobileScreen)) {
+@media only screen and (max-width: @largestMobileScreen) {
   .ui.page.grid {
     width: @mobileWidth;
     padding-left: @mobileGutter;
@@ -169,7 +164,7 @@
     margin-right: 0em;
   }
 }
-@media only screen and (min-width: @tabletBreakpoint ) {
+@media only screen and (min-width: @tabletBreakpoint) and (max-width: @largestTabletScreen) {
   .ui.page.grid {
     width: @tabletWidth;
     margin-left: @tabletMargin;
@@ -178,7 +173,7 @@
     padding-right: @tabletGutter;
   }
 }
-@media only screen and (min-width: @computerBreakpoint) {
+@media only screen and (min-width: @computerBreakpoint) and (max-width: @largestSmallMonitor) {
   .ui.page.grid {
     width: @computerWidth;
     margin-left: @computerMargin;
@@ -187,7 +182,7 @@
     padding-right: @computerGutter;
   }
 }
-@media only screen and (min-width: @largeMonitorBreakpoint) {
+@media only screen and (min-width: @largeMonitorBreakpoint) and (max-width: @largestLargeMonitor) {
   .ui.page.grid {
     width: @largeMonitorWidth;
     margin-left: @largeMonitorMargin;
@@ -1289,6 +1284,7 @@
 -----------------------*/
 
 .ui.grid > .white.row,
+.ui.grid > .white.column,
 .ui.grid > .row > .white.column {
   background-color: @white !important;
   color: @textColor;
@@ -1301,6 +1297,7 @@
 }
 
 .ui.grid > .black.row,
+.ui.grid > .black.column,
 .ui.grid > .row > .black.column {
   background-color: @black !important;
   color: @white;
@@ -1313,6 +1310,7 @@
 }
 
 .ui.grid > .blue.row,
+.ui.grid > .blue.column,
 .ui.grid > .row > .blue.column {
   background-color: @blue !important;
   color: @white;
@@ -1325,6 +1323,7 @@
 }
 
 .ui.grid > .green.row,
+.ui.grid > .green.column,
 .ui.grid > .row > .green.column {
   background-color: @green !important;
   color: @white;
@@ -1337,6 +1336,7 @@
 }
 
 .ui.grid > .orange.row,
+.ui.grid > .orange.column,
 .ui.grid > .row > .orange.column {
   background-color: @orange !important;
   color: @white;
@@ -1361,6 +1361,7 @@
 }
 
 .ui.grid > .purple.row,
+.ui.grid > .purple.column,
 .ui.grid > .row > .purple.column {
   background-color: @purple !important;
   color: @white;
@@ -1373,6 +1374,7 @@
 }
 
 .ui.grid > .red.row,
+.ui.grid > .red.column,
 .ui.grid > .row > .red.column {
   background-color: @red !important;
   color: @white;
@@ -1385,6 +1387,7 @@
 }
 
 .ui.grid > .teal.row,
+.ui.grid > .teal.column,
 .ui.grid > .row > .teal.column {
   background-color: @teal !important;
   color: @white;
@@ -1397,6 +1400,7 @@
 }
 
 .ui.grid > .yellow.row,
+.ui.grid > .yellow.column,
 .ui.grid > .row > .yellow.column {
   background-color: @yellow !important;
   color: @white;
@@ -1476,7 +1480,6 @@
 .ui[class*="equal height"].grid > .row > .column,
 .ui.grid > [class*="equal height"].row > .column {
   display: block;
-  flex-direction: column;
   flex-grow: 1;
 }