5-Column Grid Layout
beta

Understanding our grid system, both the standard 12-column and the custom 5-column, is one of the most important aspects of the Design Language. Our grid systems are based on the Bootstrap css library. As expressed in Layout, it is strongly recommended that you read the source documentation to fully understanding the grid system.

Like the standard 12-column grid, the 5-column grid should be in a container div <div class="container">…</div> which is in a section <section>…</section>.

Also, like the standard grid, each "row" of columns should be in a row div but with the additional class of row-grid-5 <div class="row row-grid-5">…</div>. The most columns you can have in a row is 5.

(For all three examples below, on a mobile device, each column is its own row.)

Note: Resize window to view components at various breakpoints.

Below is a 12-column standard Bootstrap/Design Language grid with 5 2-column elements. In order to make this work, there is an empty 1-column element on each side. The row has a blue background to better demonstrate the spacing and also see the difference between this example and the 5-column grid examples below.

If your design/layout calls for five columns which take up the entire width of the page or parent element, the standard 12-column grid system will not work and the example below becomes broken.

Column 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Column 2

Nunc efficitur quam vitae imperdiet blandit.

Column 3

Donec ultrices volutpat odio a ultricies.

Column 4

Pellentesque et quam maximus, rhoncus orci eget, dignissim odio.

Column 5

Aenean ac ipsum nec nibh vestibulum varius sed et orci.

To fill the width of the page or parent element with 5 columns, use the 5-Column-Grid. This row also has a blue background. Compare this example to the one above.

Column 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Column 2

Aenean ac ipsum nec nibh vestibulum varius sed et orci.

Column 3

Donec ultrices volutpat odio a ultricies.

Column 4

Pellentesque et quam maximus, rhoncus orci eget, dignissim odio.

Column 5

Nunc efficitur quam vitae imperdiet et blandit.

Column 1

Lorem ipsum ...

Column 2

Aenean ac ipsum ...

Column 3

Donec ultrices ...

Column 4

Pellentesque et ...

Column 5

Nunc efficitur ...

It is possible to use both grid systems to achieve certain designs. For example, you can create a 5-column grid within a standard 8-column-centered grid (or any size centered grid). The row containing the col-centered-8 element has a yellow background while the row-grid-5 row has a blue background to better demonstrate the spacing, centering, and how the grid works.

Column 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Column 2

Aenean ac ipsum nec nibh vestibulum varius sed et orci.

Column 3

Donec ultrices volutpat odio a ultricies.

Column 4

Pellentesque et quam maximus, rhoncus orci eget, dignissim odio.

Column 5

Nunc efficitur quam vitae imperdiet blandit

Column 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Column 2

Aenean ac ipsum nec nibh vestibulum varius sed et orci.

Column 3

Donec ultrices volutpat odio a ultricies.

Column 4

Pellentesque et quam maximus, rhoncus orci eget, dignissim odio.

Column 5

Nunc efficitur quam vitae imperdiet blandit