Foundation
Flexbox grid
The flexbox grid is another option for creating grid-based layouts with the additional features that flexbox provides. You can apply more flexbox properties by using the flexbox utility.
Grid elements
In addition to the Flexbox grid, Formation uses a 12-column, responsive, flexbox grid to provide structure and align content.
The grid consists of three distinct pieces:
- Container. There are two types of containers. The standard container, using the class name
vads-l-grid-container
, centers the content and provides a max width of1000px
. To use a grid container that uses the full width of the page, usevads-l-grid-container--full
instead. - Row: Enables the flexbox layout.
- Columns: By default, columns will automatically adjust to evenly fit into a row. Using the responsive prefixes, they can collapse into different lockups at different breakpoints in order provide flexibility in the design across different viewports. There are a maximum of 12 columns in each row.
Unlike the float grid, you will need to use the padding utility and/or the margin utility in to provide column spacing. This is intentional and it allows the grid to accept more design options than the standard float grid.
Auto-sizing columns
Columns without a set width will automatically layout with equal widths. For example, below are four instances of vads-l-col
which are each automatically 25% wide. The columns will automatically wrap when they don’t fit a single row.
<div class="vads-l-grid-container">
<div class="vads-l-row">
<div class="vads-l-col site-grid-example">
1
</div>
<div class="vads-l-col site-grid-example">
2
</div>
<div class="vads-l-col site-grid-example">
3
</div>
<div class="vads-l-col site-grid-example">
4
</div>
</div>
</div>
Fixed columns
Column widths can be set using a modifier value on the vads-l-col
class, such as vads-l-col--3
. The number at the end of the class name represents the number of columns out of a 12-column grid. The total of those numbers in any vads-l-row
should equal 12. If the total is more than 12, the grid will collapse into separate rows.
<div class="vads-l-grid-container">
<div class="vads-l-row">
<div class="vads-l-col--3 site-grid-example">
.vads-l-col--3
</div>
<div class="vads-l-col--9 site-grid-example">
.vads-l-col--9
</div>
</div>
</div>
How to nest grids
The flexbox grid can be easily nested inside other flexbox grid columns using both padding utilities and margin utilities. If the grid column has a padding utility applied, use the same value of that padding utility on a negative margin left and right utility placed in the grid row.
In this example, we have vads-u-padding--2p5
applied to each grid column, so we use vads-u-margin-x--neg2p5
on the grid row inside the grid column.
<div class="vads-l-grid-container">
<div class="vads-l-row">
<div class="vads-l-col vads-u-background-color--primary-alt-lightest vads-u-border--1px vads-u-padding--2p5">
1
</div>
<div class="vads-l-col vads-u-background-color--primary-alt-lightest vads-u-border--1px vads-u-padding--2p5">
<div class="vads-l-row vads-u-margin-x--neg2p5">
<div class="vads-l-col vads-u-background-color--primary-alt-lightest vads-u-border--1px vads-u-padding--2p5">
1
</div>
<div class="vads-l-col vads-u-background-color--primary-alt-lightest vads-u-border--1px vads-u-padding--2p5">
2
</div>
</div>
</div>
</div>
</div>
Responsive grid
Each column class can include a breakpoint prefix that allows changing the column widths at different breakpoints.
<div class="vads-l-grid-container vads-u-padding-y--2">
<div class="vads-l-row">
<div class="vads-l-col--12 medium-screen:vads-l-col--6 small-desktop-screen:vads-l-col--4 large-screen:vads-l-col--2 site-grid-example">
1
</div>
<div class="vads-l-col--12 medium-screen:vads-l-col--6 small-desktop-screen:vads-l-col--4 large-screen:vads-l-col--2 site-grid-example">
2
</div>
<div class="vads-l-col--12 medium-screen:vads-l-col--6 small-desktop-screen:vads-l-col--4 large-screen:vads-l-col--2 site-grid-example">
3
</div>
<div class="vads-l-col--12 medium-screen:vads-l-col--6 small-desktop-screen:vads-l-col--4 large-screen:vads-l-col--2 site-grid-example">
4
</div>
<div class="vads-l-col--12 medium-screen:vads-l-col--6 small-desktop-screen:vads-l-col--4 large-screen:vads-l-col--2 site-grid-example">
5
</div>
<div class="vads-l-col--12 medium-screen:vads-l-col--6 small-desktop-screen:vads-l-col--4 large-screen:vads-l-col--2 site-grid-example">
6
</div>
</div>
</div>
Breakpoint sass variable | Width |
---|---|
$xsmall-screen |
320px |
$small-screen |
481px |
$medium-screen |
768px |
$small-desktop-screen |
1008px |
$large-screen |
1201px |
Read more about breakpoints.