Grid – Flexbox Version
The grid component can be enhanced with a few additional features that are based on the CSS3 Flexbox Model and make for some very handy layouting magic.
Adopting the flex grid comes with easy vertical alignment, markup-independent ordering, and fixed-width columns in fluid grids, to name a few.
For a quick overview over what the flexbox model does, we recommend the excellent Complete Guide to Flexbox on CSS-Tricks.
Note that none of the features described here will work in browsers older than, and including, Internet Explorer 9. Such browsers will fall back on the considerably less fancy default grid styles.
- Layout Switch
- Immediate Benefits
- Alignment
- Ordering
- Filled-up Grid Rows
- Grid Items with Fixed Widths
Layout Switch
To turn a regular grid into a flexbox grid, apply the grid-flex modifier class.
<div class="grid grid-flex">
<div class="grid-item"></div>
<div class="grid-item"></div>
</div>
Note that in the flex grid, grid items no longer have an implicit width of 100%. If you want your elements to be 100% wide, please apply the respective width class explicitly.
Immediate Benefits
Turning your grid into a flex grid has a couple of immediate benefits.
Line Wraps
The regular grid may cause wrapping bugs when its grid items have different heights. This is especially hard to find a workaround for in grids where items are inserted dynamically.
Flex grids wrap properly, regardless of the height of the individual grid items.
<div class="grid "></div>
No Redundant Gutters
In a regular grid, if you define a gutter, then the gutter belonging to the last grid row will spill out of the container, forcing any following content down.
In the flex grid, gutters appear only between grid items, so you have full control over the spacing around the outward grid container.
<div class="border background">Content before</div> <div class="grid gutter "></div> <div class="border background">Content after</div>
Alignment
With flex grids, you can specify declaratively how elements should be aligned with each other, leaving all related styling and calculations to the browser.
Vertical Alignment
You can configure vertical alignment either on the container, where it applies to all grid items, or on individual grid items.
To align items, apply one of the grid-align-<alignment> classes, where “<alignment>” is one of start, end, center, baseline, or stretch (default).
Vertical alignment applies to both single- and multi-row grids.
<div class="grid grid-flex
">
</div>
<div class="grid-item grid-align-center">
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item
"></div>
</div>
Horizontal Alignment
You can also choose how grid content should be justified (that is, horizontally aligned) when there is left-over whitespace in a row.
To justify grid items, apply one of the grid-justify-<alignment> classes to the grid container, where “<alignment>” is one of start (default), center, end, space-between, or space-around.
<div class="grid grid-flex gutter
">
</div>
Ordering
In flex grids, you can decide on the order in which individual grid items should be rendered.
This reordering takes place entirely in CSS, which allows you to structure your HTML in whichever way makes the most sense, and then adjust the layout as needed.
The ordering classes are defined as <state->order-<index>-<direction>, where “<index>” is an index from one to five, and “<direction>” is either up or down.
By default, all grid items start with the default index of zero. An item is moved further up or down the higher the index gets.
Between elements with the same index, markup order is preserved.
<div class="grid grid-flex gutter">
<div class="grid-item one-whole">
<div class="demo-box-1">Box 1 (default)</div>
</div>
<div class="grid-item one-whole">
<div class="demo-box-1">Box 2 (default)</div>
</div>
<div class="grid-item one-whole">
<div class="demo-box-1">Box 3 (default)</div>
</div>
<div class="grid-item one-whole order-one-up">
<div class="demo-box-2">Box 4 (one-up)</div>
</div>
<div class="grid-item one-whole order-one-down">
<div class="demo-box-3">Box 5 (one-down)</div>
</div>
<div class="grid-item one-whole order-two-up">
<div class="demo-box-4">Box 6 (two-up)</div>
</div>
<div class="grid-item one-whole order-one-down">
<div class="demo-box-3">Box 7 (one-down)</div>
</div>
<div class="grid-item one-whole order-one-down">
<div class="demo-box-3">Box 8 (one-down)</div>
</div>
</div>
The rendering order can also be defined for individual device states using the usual prefixes.
<div class="grid grid-flex gutter">
<div class="grid-item palm-one-whole lap-one-third desk-one-third lap-order-2down desk-order-2down">
<div class="demo-box-1" style="min-height: 4em;">
First in the markup
</div>
</div>
<div class="grid-item palm-one-whole lap-one-third desk-one-third lap-order-1down desk-order-1down">
<div class="demo-box-2" style="min-height: 4em;">
Second in the markup
</div>
</div>
<div class="grid-item palm-one-whole lap-one-third desk-one-third lap-order-3down desk-order-3down">
<div class="demo-box-3" style="min-height: 4em;">
Third in the markup
</div>
</div>
</div>
Filled-up Grid Rows
By default, if a grid row is not completely filled up, it will leave over whitespace.
Applying the grid-fill-rows modifier to a flex grid container will make its grid items split up any left-over whitespace between themselves.
<div class="grid grid-flex ">
<div class="grid-item one-fourth">
<div class="demo-box-1">1/4</div>
</div>
<div class="grid-item one-fourth">
<div class="demo-box-2">1/4</div>
</div>
<div class="grid-item one-fourth">
<div class="demo-box-3">1/4</div>
</div>
<div class="grid-item one-fourth">
<div class="demo-box-4">1/4</div>
</div>
<div class="grid-item one-fourth">
<div class="demo-box-4">1/4</div>
</div>
<div class="grid-item one-fourth">
<div class="demo-box-1">1/4</div>
</div>
</div>
Grid Items with Fixed Widths
While regular grids are restricted to fractional widths, flex grids allow you to apply fixed absolute widths to individual columns without breaking the fluidity of the grid as a whole.
In a grid with filled-up grid rows, apply the grid-item-fixed-width modifier class to a grid item that should remain at a fixed width, regardless of the space available.
You can either force a specific width directly on the grid item, or leave the width definition away entirely, in which case the grid item will end up exactly as wide as its content requires.
<div class="grid grid-flex grid-fill-rows gutter-xs">
<div class="grid-item grid-item-fixed-width" style="width: 6em;">
<div class="demo-box-1">
Fixed: 6em
<span class="block fa">      </span>
</div>
</div>
<div class="grid-item three-fifths">
<div class="demo-box-2">
Fluid: 3/5
</div>
</div>
<div class="grid-item one-fourth">
<div class="demo-box-2">
Fluid: 1/4
</div>
</div>
<div class="grid-item grid-item-fixed-width">
<div class="demo-box-1">
Fixed: Content
<span class="block fa"></span>
</div>
</div>
<div class="grid-item one-fourth">
<div class="demo-box-2">
Fluid: 1/4
</div>
</div>
</div>