Grid fixing foreva

dist/components/grid.css

@@ -1208,10 +1208,9 @@ body > .ui.grid {
       -ms-flex-direction: column;
           flex-direction: column;
   vertical-align: top;
-  -webkit-box-pack: start !important;
-  -webkit-justify-content: flex-start !important;
-      -ms-flex-pack: start !important;
-          justify-content: flex-start !important;
+  -webkit-align-self: flex-start !important;
+      -ms-flex-item-align: start !important;
+          align-self: flex-start !important;
 }
 
 /* Middle Aligned */
@@ -1225,10 +1224,9 @@ body > .ui.grid {
       -ms-flex-direction: column;
           flex-direction: column;
   vertical-align: middle;
-  -webkit-box-pack: center !important;
-  -webkit-justify-content: center !important;
-      -ms-flex-pack: center !important;
-          justify-content: center !important;
+  -webkit-align-self: center !important;
+      -ms-flex-item-align: center !important;
+          align-self: center !important;
 }
 
 /* Bottom Aligned */
@@ -1242,10 +1240,9 @@ body > .ui.grid {
       -ms-flex-direction: column;
           flex-direction: column;
   vertical-align: bottom;
-  -webkit-box-pack: end !important;
-  -webkit-justify-content: flex-end !important;
-      -ms-flex-pack: end !important;
-          justify-content: flex-end !important;
+  -webkit-align-self: flex-end !important;
+      -ms-flex-item-align: end !important;
+          align-self: flex-end !important;
 }
 
 /* Stretched */
@@ -1258,10 +1255,9 @@ body > .ui.grid {
   display: -webkit-inline-flex !important;
   display: -ms-inline-flexbox !important;
   display: inline-flex !important;
-  -webkit-box-pack: stretch;
-  -webkit-justify-content: stretch;
-      -ms-flex-pack: stretch;
-          justify-content: stretch;
+  -webkit-align-self: stretch;
+      -ms-flex-item-align: stretch;
+          align-self: stretch;
   -webkit-box-orient: vertical;
   -webkit-box-direction: normal;
   -webkit-flex-direction: column;

dist/semantic.css

@@ -16143,10 +16143,9 @@ body > .ui.grid {
   -ms-flex-direction: column;
   flex-direction: column;
   vertical-align: top;
-  -webkit-box-pack: start !important;
-  -webkit-justify-content: flex-start !important;
-  -ms-flex-pack: start !important;
-  justify-content: flex-start !important;
+  -webkit-align-self: flex-start !important;
+  -ms-flex-item-align: start !important;
+  align-self: flex-start !important;
 }
 
 /* Middle Aligned */
@@ -16161,10 +16160,9 @@ body > .ui.grid {
   -ms-flex-direction: column;
   flex-direction: column;
   vertical-align: middle;
-  -webkit-box-pack: center !important;
-  -webkit-justify-content: center !important;
-  -ms-flex-pack: center !important;
-  justify-content: center !important;
+  -webkit-align-self: center !important;
+  -ms-flex-item-align: center !important;
+  align-self: center !important;
 }
 
 /* Bottom Aligned */
@@ -16179,10 +16177,9 @@ body > .ui.grid {
   -ms-flex-direction: column;
   flex-direction: column;
   vertical-align: bottom;
-  -webkit-box-pack: end !important;
-  -webkit-justify-content: flex-end !important;
-  -ms-flex-pack: end !important;
-  justify-content: flex-end !important;
+  -webkit-align-self: flex-end !important;
+  -ms-flex-item-align: end !important;
+  align-self: flex-end !important;
 }
 
 /* Stretched */
@@ -16196,10 +16193,9 @@ body > .ui.grid {
   display: -webkit-inline-flex !important;
   display: -ms-inline-flexbox !important;
   display: inline-flex !important;
-  -webkit-box-pack: stretch;
-  -webkit-justify-content: stretch;
-  -ms-flex-pack: stretch;
-  justify-content: stretch;
+  -webkit-align-self: stretch;
+  -ms-flex-item-align: stretch;
+  align-self: stretch;
   -webkit-box-orient: vertical;
   -webkit-box-direction: normal;
   -webkit-flex-direction: column;

examples/grid.html

@@ -49,6 +49,14 @@
     margin-top: 10em;
   }
 
+  img {
+    display: block;
+    max-width: 100%;
+  }
+  img + img {
+    margin-top: 0.5em;
+  }
+
   /* Shows content box (not negative margins) */
   .grid {
     position: relative;
@@ -67,8 +75,8 @@
   .celled.grid:before {
     display: none;
   }
-  .ui.aligned .column:before {
-    display: none;
+  .ui.aligned .column:after {
+    display: none !important;
   }
   .grid .column:not(.row):not(.grid):after {
     background-color: rgba(86,61,124,.15);
@@ -84,8 +92,6 @@
   <div class="ui text container">
       <h1 class="ui inverted block header">Top Level Grids</h1>
 
-      <p>There are two ways to lay out page content inside a grid. Each has its own benefits and drawbacks</p>
-
       <h3 class="first">Page Grid</h3>
       <p>A <code>ui page grid</code> uses <code>padding</code> to maintain fluid page gutters. Each columns width will continuously adjust as your browser width changes to maintain the same percentage of overall browser width</p>
       <p>Page grids work best for wide multi-column pages like homepages.</p>
@@ -162,7 +168,7 @@
         <div class="four wide column"></div>
       </div>
 
-      <h3 class="first">Clearing Rows</h3>
+      <h3>Clearing Rows</h3>
       <p>Adding row wrappers allow you to manually specify you want a new row to begin. This can be useful when centering content with a  <code>ui centered grid</code>.</p>
 
       <div class="ui centered grid">
@@ -179,7 +185,7 @@
       </div>
 
 
-      <h3 class="first">Special Variations</h3>
+      <h3>Special Variations</h3>
       <p>Some special variations that format grids like tables require you to specify rows. For example a <code>divided grid</code> or a <code>celled grid</code> requires row wrappers.</p>
 
       <div class="ui horizontal section divider">Celled Grid</div>
@@ -253,7 +259,7 @@
       <h1 class="ui inverted block header">Adjusting Grids</h1>
 
 
-      <h3 class="ui header">Centering Content</h3>
+      <h3>Centering Content</h3>
       <p>If a row does not take up all sixteen grid columns, you can use a <code>ui centered grid</code>, <code>centered row</code>, or <code>centered column</code> to center the column contents inside the grid.
       </p>
       <div class="ui two column centered grid">
@@ -264,7 +270,7 @@
         </div>
       </div>
 
-      <h3 class="ui header">Floating Rows</h3>
+      <h3>Floating Rows</h3>
       <p>Since Semantic UI's grid is based on flex box, a <code>left floated</code> item should come first, and a <code>right floated</code> item last in its row.</p>
 
       <div class="ui grid">
@@ -281,7 +287,7 @@
       </div>
 
 
-      <h3 class="ui header">Text Alignment</h3>
+      <h3>Text Alignment</h3>
       <p>You can specify text alignment using alignment variations on a grid, row, or column level.</p>
 
       <div class="ui grid">
@@ -304,7 +310,7 @@
         </div>
       </div>
 
-      <h3 class="ui header">Vertical Alignment</h3>
+      <h3>Vertical Alignment</h3>
       <p>You can specify vertical alignment on a grid, row, or column level.</p>
       <div class="ui middle aligned four column centered grid">
         <div class="row">
@@ -321,8 +327,7 @@
         </div>
       </div>
 
-
-      <h3 class="first">Specifying Columns</h3>
+      <h3 class="first">Specifying Column Count</h3>
       <p>Specifying a column count will divide columns into rows of predetermined column count. Additional columns will automatically flow to the next row.</p>
       <div class="ui three column grid">
         <div class="column">column</div>
@@ -349,8 +354,7 @@
         </div>
       </div>
 
-      <h3>Specifying Column Width</h3>
-      <p>Get three columns <strong>starting at desktops and scaling to large desktops</strong> of various widths Remember, grid columns should add up to sixteen for a single horizontal block More than that, and columns start stacking no matter the viewport</p>
+      <h3>Individual Column Width</h3>
       <div class="ui three column grid">
         <div class="four wide column">four wide column</div>
         <div class="eight wide column">eight wide column</div>

src/definitions/collections/grid.less

@@ -1185,7 +1185,7 @@ body > .ui.grid {
 .ui.grid > .row > [class*="top aligned"].column {
   flex-direction: column;
   vertical-align: top;
-  justify-content: flex-start !important;
+  align-self: flex-start !important;
 }
 
 /* Middle Aligned */
@@ -1195,7 +1195,7 @@ body > .ui.grid {
 .ui.grid > .row > [class*="middle aligned"].column {
   flex-direction: column;
   vertical-align: middle;
-  justify-content: center !important;
+  align-self: center !important;
 }
 
 /* Bottom Aligned */
@@ -1205,7 +1205,7 @@ body > .ui.grid {
 .ui.grid > .row > [class*="bottom aligned"].column {
   flex-direction: column;
   vertical-align: bottom;
-  justify-content: flex-end !important;
+  align-self: flex-end !important;
 }
 
 /* Stretched */
@@ -1215,7 +1215,7 @@ body > .ui.grid {
 .ui.grid > .stretched.column:not(.row),
 .ui.grid > .row > .stretched.column {
   display: inline-flex !important;
-  justify-content: stretch;
+  align-self: stretch;
   flex-direction: column;
 }