Grid

The grid foundation provides a responsive layout system based on flexbox, allowing you to define columns, control spacing (gutters), and rearrange elements using offsets and order utilities. This system is composed of three core elements: container, row, and columns.

Naming conventions

The grid foundation uses a consistent, element-based naming system to define layout structure, spacing, and responsive behavior.

.f--{grid-element}-{variation}

Below is an overview of the available grid foundation classes, grouped by their role in the layout system:

.f--container                    // Main wrapper
.f--container--fluid             // Full-width wrapper
.f--container--{breakpoint}-fluid // Breakpoint-specific fluid

.f--row                          // Flex row wrapper
.f--row--remove-gutter          // Row without spacing

.f--col-{number}                 // Column width (static)
.f--col-{breakpoint}-{number}   // Responsive column width
.f--offset-{number}              // Column offset (static)
.f--offset-{breakpoint}-{number} // Responsive offset
.f--order-{number}               // Column order (static)
.f--order-{breakpoint}-{number}  // Responsive order

How it works

The grid system is built on three foundational components that work together:

01. Container (`.f--container`)

The container is the main wrapper for layout modules. It provides:

Horizontal spacing (padding) so content doesn’t touch screen edges
A maximum width to keep layouts readable and balanced
Responsive behavior that adjusts automatically per screen size

This creates consistent horizontal spacing throughout the layout.

Fluid modifiers:

Sometimes you need content to span edge-to-edge. Use .f--container--fluid variants:

.f--container--fluid             // Always fluid
.f--container--laptop-fluid      // Fluid only on laptop
.f--container--tabletm-fluid     // Fluid only on tablet medium
.f--container--mobile-fluid      // Fluid only on mobile

These remove horizontal padding and reset inner row/column gutters.

02. Row (`.f--row`)

The row wraps columns and defines a horizontal flex container with controlled spacing:

Applies display: flex and enables wrapping
Adds negative margins to compensate for column padding
Ensures columns align correctly with container edges

Removing gutters:

Use .f--row--remove-gutter to remove horizontal spacing:

Removes lateral margins from .f--row
Removes left/right padding from all child .f--col-* elements

03. Columns (`.f--col-*`)

The column system splits rows into a 12-column grid:

Column sizes:

.f--col-6              // 6/12 columns = 50%
.f--col-tabletl-4      // 4/12 columns on tablet large

Offsets:

Shift columns to the right, leaving empty space:

.f--offset-2           // Offset by 2 columns
.f--offset-tabletl-2   // Offset on tablet large only

Order:

Change visual order of columns:

.f--order-1            // Order position 1
.f--order-tabletm-1    // Order 1 on tablet medium

Grid Cheatsheet

Class	Function
`.f--col-6`	Column spanning 6/12 (50%)
`.f--col-tabletl-4`	Column with 4/12 width on tablet large
`.f--offset-2`	Offsets the column by 2 columns
`.f--offset-mobile-1`	Offset of 1 column on mobile
`.f--order-1`	Sets column display order to 1
`.f--order-tabletm-1`	Sets column order to 1 on tablet medium

How to use it

In HTML

<section>
  <div class="f--container">
    <div class="f--row">
      <div class="f--col-4 f--col-tablets-12">
        <p>Item 1</p>
      </div>
      <div class="f--col-4 f--col-tablets-12">
        <p>Item 2</p>
      </div>
      <div class="f--col-4 f--col-tablets-12">
        <p>Item 3</p>
      </div>
    </div>
  </div>
</section>

Codepen example:

Grid System Best Practices

Do’s ✅

✅ Always use the container → row → column hierarchy
✅ Use responsive column classes for mobile optimization
✅ Reference Figma designs to determine column counts
✅ Combine with spacing utilities for complete layouts
✅ Test layouts across all breakpoints

Don’ts ❌

❌ Don’t nest containers (only one per section)
❌ Don’t skip the row wrapper
❌ Don’t use arbitrary widths instead of grid columns
❌ Don’t forget mobile breakpoints
❌ Don’t mix grid system with custom flex layouts unnecessarily

Knowledge Check

Test your understanding of this section

Loading questions...