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 of 1000px. To use a grid container that uses the full width of the page, use vads-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.

.vads-l-col--3

.vads-l-col--9

<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