The new 'grid' system focuses on using Flexbox. Below is a list of column sizes and some examples of typical layouts.
Flex Columns
Here is a list of built-in Flex column (.flex-column-*) sizes. The column number correlates to the column's percentage width. (Ex: .flex-column-25 - 25% width)
- .flex-column-25
- .flex-column-33
- .flex-column-50
- .flex-column-66
- .flex-column-75
- .flex-column-100
2 Column (Equal)
Wow, Surfing!
Conferam tecum, quam cuique verso rem subicias; Quorum sine causa fieri nihil putandum est. Quid de Platone aut de Democrito loquar? Unum est sine dolore esse, alterum cum voluptate. Duarum enim vitarum nobis erunt instituta capienda.
<div class="flex-row">
<div class="flex-column-50">
<img data-src="images/surfing_1.jpg" alt="surfing" class="lazyload">
</div>
<div class="flex-column-50">
<h2>Wow, Surfing!</h2>
<p>Conferam tecum, quam cuique verso rem subicias; Quorum sine causa fieri nihil...</p>
</div>
</div>2 Column (Equal - Reverse)
Wow, Surfing!
Conferam tecum, quam cuique verso rem subicias; Quorum sine causa fieri nihil putandum est. Quid de Platone aut de Democrito loquar? Unum est sine dolore esse, alterum cum voluptate. Duarum enim vitarum nobis erunt instituta capienda.
<div class="flex-row flex-reverse">
<div class="flex-column-50">
<h2>Wow, Surfing!</h2>
<p>Conferam tecum, quam cuique verso rem subicias; Quorum sine causa fieri nihil...</p>
</div>
<div class="flex-column-50">
<img data-src="images/surfing_1.jpg" alt="surfing" class="lazyload">
</div>
</div>2 Column (25 | 75)
Yep, Surfing!
Conferam tecum, quam cuique verso rem subicias; Quorum sine causa fieri nihil putandum est. Quid de Platone aut de Democrito loquar? Unum est sine dolore esse, alterum cum voluptate. Duarum enim vitarum nobis erunt instituta capienda.
<div class="flex-row">
<div class="flex-column-25">
<img data-src="images/surfing_2.jpg" alt="surfing" class="lazyload">
</div>
<div class="flex-column-75">
<h2>Yep, Surfing!</h2>
<p>Conferam tecum, quam cuique verso rem subicias; Quorum sine causa fieri nihil...</p>
</div>
</div>3 Column
<div class="flex-row">
<div class="flex-column-33">
<img data-src="images/surfing_1.jpg" alt="surfing" class="lazyload">
</div>
<div class="flex-column-33">
<img data-src="images/surfing_2.jpg" alt="surfing" class="lazyload">
</div>
<div class="flex-column-33">
<img data-src="images/surfing_3.jpg" alt="surfing" class="lazyload">
</div>
</div>4 Column
More Surfing!
Conferam tecum, quam cuique verso rem subicias; Quorum sine causa fieri nihil putandum est. Quid de Platone aut de Democrito loquar? Unum est sine dolore esse, alterum cum voluptate. Duarum enim vitarum nobis erunt instituta capienda.
<div class="flex-row">
<div class="flex-column-25">
<img data-src="images/surfing_1.jpg" alt="surfing" class="lazyload">
</div>
<div class="flex-column-25">
<h2>More Surfing!</h2>
<p>Conferam tecum, quam cuique verso rem subicias; Quorum sine causa fieri nihil...</p>
</div>
<div class="flex-column-25">
<img data-src="images/surfing_2.jpg" alt="surfing" class="lazyload">
</div>
<div class="flex-column-25">
<img data-src="images/surfing_3.jpg" alt="surfing" class="lazyload">
</div>
</div>Options | .flex-row
.flex-top
Aligns row content to top of element.
Wow, Surfing!
Conferam tecum, quam cuique verso rem subicias; Quorum sine causa fieri nihil putandum est. Quid de Platone aut de Democrito loquar? Unum est sine dolore esse, alterum cum voluptate. Duarum enim vitarum nobis erunt instituta capienda.
<div class="flex-row flex-top">
<div class="flex-column-50">
<img data-src="images/surfing_1.jpg" alt="surfing" class="lazyload">
</div>
<div class="flex-column-50">
<h2>Wow, Surfing!</h2>
<p>Conferam tecum, quam cuique verso rem subicias; Quorum sine causa fieri nihil...</p>
</div>
</div>.equal-height
Sets all columns with equal height.
Wow, Surfing!
Conferam tecum, quam cuique verso rem subicias; Quorum sine causa fieri nihil putandum est. Quid de Platone aut de Democrito loquar? Unum est sine dolore esse, alterum cum voluptate. Duarum enim vitarum nobis erunt instituta capienda.
<div class="flex-row equal-height">
<div class="flex-column-50">
<img data-src="images/surfing_1.jpg" alt="surfing" class="lazyload">
</div>
<div class="flex-column-50">
<h2>Wow, Surfing!</h2>
<p>Conferam tecum, quam cuique verso rem subicias; Quorum sine causa fieri nihil...</p>
</div>
</div>.flex-center
Centers flex column(s) in the row.
Wow, Surfing!
Conferam tecum, quam cuique verso rem subicias; Quorum sine causa fieri nihil putandum est. Quid de Platone aut de Democrito loquar? Unum est sine dolore esse, alterum cum voluptate. Duarum enim vitarum nobis erunt instituta capienda.
<div class="flex-row flex-center">
<div class="flex-column-33">
<img data-src="images/surfing_1.jpg" alt="surfing" class="lazyload">
</div>
<div class="flex-column-33">
<h2>Wow, Surfing!</h2>
<p>Conferam tecum, quam cuique verso rem subicias; Quorum sine causa fieri nihil...</p>
</div>
</div>Options | .flex-column-*
.align-right
Aligns content to the right.
Wow, Surfing!
Conferam tecum, quam cuique verso rem subicias; Quorum sine causa fieri nihil putandum est. Quid de Platone aut de Democrito loquar? Unum est sine dolore esse, alterum cum voluptate. Duarum enim vitarum nobis erunt instituta capienda.
<div class="flex-row">
<div class="flex-column-50">
<img data-src="images/surfing_1.jpg" alt="surfing" class="lazyload">
</div>
<div class="flex-column-50 align-right">
<h2>Wow, Surfing!</h2>
<p>Conferam tecum, quam cuique verso rem subicias; Quorum sine causa fieri nihil...</p>
</div>
</div>