Adds grid pairing with divider/other content

RELEASE NOTES.md

@@ -8,6 +8,9 @@
 - **Modal** - Modal ``left`` and ``right`` sections are now replaced with ``image`` and ``description``
 
 **Enhancements**
+- **Grid** - Elements inside a grid that are not rows or columns will now align properly
+- **Grid** - ``ui divider`` can now be used inside of row columns as well as ``vertically divided grid`` variation
+- **Image** - New ``bordered image`` variation
 - **Popup** - Popup content can now be specified on initialization.
 - **Popup** - Popup can now allow itself not to be closed when hovered over
 - **Steps** - Steps can now have icons, descriptions and titles. Step default theme has been modified significantly to be more flexible.

src/definitions/collections/grid.less

@@ -63,11 +63,15 @@ body > .ui.grid {
   width: @oneWide;
   padding-left: @gutterWidth;
   padding-right: @gutterWidth;
-
   box-sizing: border-box;
   vertical-align: top;
 }
 
+.ui.grid > * {
+  padding-left: @gutterWidth;
+  padding-right: @gutterWidth;
+}
+
 /*-------------------
         Rows
 --------------------*/
@@ -79,7 +83,7 @@ body > .ui.grid {
   padding: (@rowSpacing / 2) 0% 0%;
   font-size: 0rem;
 }
-.ui.grid > .row:first-child {
+.ui.grid > :first-child {
   padding-top: @firstRowSpacing;
   margin-top: @firstRowSpacing;
 }
@@ -90,7 +94,7 @@ body > .ui.grid {
 
 
 /* Vertical padding when no rows */
-.ui.grid > .column {
+.ui.grid > .column:not(.row) {
   margin-top: @rowSpacing;
   margin-bottom: @rowSpacing;
 }
@@ -109,6 +113,14 @@ body > .ui.grid {
 }
 
 
+/*-------------------
+    Loose Coupling
+--------------------*/
+
+.ui.grid .row + .ui.divider {
+  margin: (@rowSpacing / 2) @gutterWidth;
+}
+
 /*******************************
            Variations
 *******************************/
@@ -413,6 +425,16 @@ body > .ui.grid {
   padding-right: @veryRelaxedGutterWidth;
 }
 
+/* Coupling with UI Divider */
+.ui.relaxed.grid .row + .ui.divider {
+  margin-left: @relaxedGutterWidth;
+  margin-right: @relaxedGutterWidth;
+}
+.ui.very.relaxed.grid .row + .ui.divider {
+  margin-left: @veryRelaxedGutterWidth;
+  margin-right: @veryRelaxedGutterWidth;
+}
+
 /*----------------------
         Fitted
 -----------------------*/
@@ -880,6 +902,7 @@ body > .ui.grid {
   }
   .ui.stackable.grid > .row > .wide.column,
   .ui.stackable.grid > .wide.column,
+  .ui.stackable.grid > .column.grid > .column,
   .ui.stackable.grid > .row > .column,
   .ui.stackable.grid > .column {
     display: block !important;