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.
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 has a max-width of
.fd-container--fluid modifier for fluid layouts with 100% of parent container.
.fd-container--centered modifier for aligning the wrapper in the of the parent container.
.fd-container--flex modifier for using flexbox option with the columns.
Equal width Columns
This component use
.fd-col--1 to illustrate the how the grid works with the spacing.
.fd-col--4 you can build a three column layout.
Probably the most used layout. With
.fd-col--6 you can achieve the two columns layout.
Unequal width columns
You can use arbitrary column sizes depending on the information you need to display.
Two columns (3/9)
The grid can be used with any column size.
Three col (3/6/3)
Example of a three column layout.
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.
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.
Three columns using flexbox
Inside flex containers, use .fd-col to distribute space with no margin.