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.

  1. Layout Switch
  2. Immediate Benefits
    1. Line Wraps
    2. No Redundant Gutters
  3. Alignment
    1. Vertical Alignment
    2. Horizontal Alignment
  4. Ordering
  5. Filled-up Grid Rows
  6. Grid Items with Fixed Widths

Layout Switch

To turn a regular grid into a flexbox grid, apply the grid-flex modifier class.

Grid wrapper
<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.

Line wraps in regular and flex grids
<div class="grid "></div>
Grid Item 1
Grid Item 2
Grid Item 3
Grid Item 4
Grid Item 5
Grid Item 6
Grid Item 7

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.

Gutters in regular and flex grids
<div class="border background">Content before</div>
<div class="grid gutter "></div>
<div class="border background">Content after</div>
Content before
Grid Item
Grid Item
Grid Item
Grid Item
Content after

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.

Flex grid with vertical alignment on all items
<div class="grid grid-flex
            ">
</div>
 
 
 
 
 
 
 
 
 
 
Flex grid with vertical alignment on individual item
<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.

Flex grid with horizontal alignment
<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.

Grid items with switched order
<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>
Box 1 (default)
Box 2 (default)
Box 3 (default)
Box 4 (one-up)
Box 5 (one-down)
Box 6 (two-up)
Box 7 (one-down)
Box 8 (one-down)

The rendering order can also be defined for individual device states using the usual prefixes.

Grid items with switched order – state-specific (Switch between palm and lap/desk states to see the effect.)
<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>
First in the markup
Second in the markup
Third in the markup

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.

Grid rows with and without left-over whitespace
<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>
1/4
1/4
1/4
1/4
1/4
1/4

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.

Fluid grid with fixed-width grid items (Resize the browser window to see how the fluid grid items flow around the fixed ones.)
<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">&#xf118; &#xf118; &#xf118; &#xf118; &#xf118; &#xf118; &#xf118;</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">&#xf118;&#xf118;&#xf118;&#xf118;&#xf118;&#xf118;&#xf118;&#xf118;&#xf118;&#xf118;&#xf118;&#xf118;</span>
        </div>
    </div>
    <div class="grid-item one-fourth">
        <div class="demo-box-2">
            Fluid: 1/4
        </div>
    </div>
</div>
Fixed: 6em       
Fluid: 3/5
Fluid: 1/4
Fixed: Content 
Fluid: 1/4