Column Layouts

Layout containers used to arrange content on a 12-column grid. Can be used inside other layout containers like sections and panels.

Includes:

• Containers contain the columns. A required wrapper with some modifiers available for width and text alignment.
• Columns contain the content. Modifiers are used to adjust the width, i.e., span columns.

Container

Available since 1.0.0

Columns must be wrapper with this container. Some modifiers are provided to give you better control over your layout.

Default Container

Default container has a letterbox max-width of 1290px.

<div class="fd-container">
 fd-container
</div>

Fluid Container

.fd-container--fluid modifier overrides the max-width for a fluid layout with 100% of parent container.

<div class="fd-container fd-container--fluid">
 fd-container--fluid
</div>

Centered Container

.fd-container--centered modifier for aligning the wrapper in the of the parent container.

<div class="fd-container fd-container--centered">
 fd-container--centered
</div>

Flex Container

.fd-container--flex modifier for using flexbox option with the columns.

<div class="fd-container fd-container--flex">
 fd-container--flex
</div>

Columns

Available since 1.0.0

Equal width Columns

12 columns

This component use .fd-col--1 to illustrate the how the grid works with the spacing.

<div class="fd-container fd-container--fluid">
    <div class="fd-col--1">col</div>
    <div class="fd-col--1">col</div>
    <div class="fd-col--1">col</div>
    <div class="fd-col--1">col</div>
    <div class="fd-col--1">col</div>
    <div class="fd-col--1">col</div>
    <div class="fd-col--1">col</div>
    <div class="fd-col--1">col</div>
    <div class="fd-col--1">col</div>
    <div class="fd-col--1">col</div>
    <div class="fd-col--1">col</div>
    <div class="fd-col--1">col</div>
</div>

Three columns

Using .fd-col--4 you can build a three column layout.

<div class="fd-container fd-container--fluid">
    <div class="fd-col--4">col</div>
    <div class="fd-col--4">col</div>
    <div class="fd-col--4">col</div>
</div>

Two columns

Probably the most used layout. With .fd-col--6 you can achieve the two columns layout.

<div class="fd-container fd-container--fluid">
    <div class="fd-col--6">col</div>
    <div class="fd-col--6">col</div>
</div>

Unequal width columns

You can use arbitrary column sizes depending on the information you need to display.

Two columns (3/9)

<div class="fd-container fd-container--centered">
    <div class="fd-col--3">col</div>
    <div class="fd-col--9">col</div>
</div>

The grid can be used with any column size.

Three col (3/6/3)

Example of a three column layout.

<div class="fd-container fd-container--centered">
    <div class="fd-col--3">col</div>
    <div class="fd-col--6">col</div>
    <div class="fd-col--3">col</div>
</div>

You can also shift columns to get a balanced visual design on your page.

One column, shifted by three columns

In the following component we have only one columns that is shifted by 3 columns.

<div class="fd-container fd-container--centered">
    <div class="fd-col--9 fd-col--shift-3">col</div>
</div>

Flex width Columns

With the fundamental grid you can take advantage of CSS Flexbox and make your grid more flexible.

Four columns and Three flex columns

Inside flex containers, use .fd-col to evenly fill the left over space. The columns leave without a given size will adjust the size according to the CSS Flexbox rules.

<div class="fd-container fd-container--centered fd-container--flex">
    <div class="fd-col--9">fix col</div>
    <div class="fd-col">flex col</div>
    <div class="fd-col">flex col</div>
    <div class="fd-col">flex col</div>
</div>

Three columns using flexbox

Inside flex containers, use .fd-col to distribute space with no margin.

<div class="fd-container fd-container--centered fd-container--flex">
    <div class="fd-col">flex col</div>
    <div class="fd-col">flex col</div>
    <div class="fd-col">flex col</div>
</div>