Grid

Grid is used to organize content within a panel. The grid layout consists of two main elements: containers and columns.

• Containers: are used to contain the columns.
• Columns: are the elements that contain the actual content.

Grid Structure

• fd-container: This is the wrapper for the grid columns. Some modifiers are provided to give you better control over your layout. The default width for this container is 1290px.
  • fd-container--fluid: Modifier for fluid layouts that will extend the width to 100% of its parent container.
  • fd-container--centered: Center aligned
  • fd-col--[num]: Column container with support from 1 to 12.

Default Container

Default container has a max-width of 1290px.

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

Fluid Container

.fd-container--fluid modifier for fluid layouts 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>

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>