Grid: Vertically Align Columns

Another trick up flexbox's sleeve is the ability to easily vertically align columns. Vertical alignment includes top, center and bottom, and can be applied to every column in a row, or to specific columns.

In the demo, we've made the last column in each row to have the tallest content in order to demonstrate how the content of the others vertically align. The first row shows the default which is to take the same height as the tallest column in the same row.

<divclass="row"><divclass="col">.col</div><divclass="col">.col</div><divclass="col">.col</div><divclass="col">1<br>2<br>3<br>4</div></div><divclass="row"><divclass="col col-top">.col</div><divclass="col col-center">.col</div><divclass="col col-bottom">.col</div><divclass="col">1<br>2<br>3<br>4</div></div><divclass="row row-top"><divclass="col">.col</div><divclass="col">.col</div><divclass="col">.col</div><divclass="col">1<br>2<br>3<br>4</div></div><divclass="row row-center"><divclass="col">.col</div><divclass="col">.col</div><divclass="col">.col</div><divclass="col">1<br>2<br>3<br>4</div></div><divclass="row row-bottom"><divclass="col">.col</div><divclass="col">.col</div><divclass="col">.col</div><divclass="col">1<br>2<br>3<br>4</div></div>

Note: The borders and gray background in the demo were added so it's easier to see the structure.