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, the CSS library 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>

VADS Breakpoint Sass Variable	USWDS Breakpoint Custom Property	Width
`$xsmall-screen`	`--mobile`	320px
`$small-screen`	`--mobile-lg`	481px
--	`--tablet`	640px
`$medium-screen`	`--medium-screen`	768px
`$small-desktop-screen`	`--desktop`	1024px
`$large-screen`	`--desktop-lg`	1201px