🏛️ 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:

.f—container — wrapper for consistent horizontal padding and max-width
.f—row — flex container with controlled gutter
.f—col-* — flexible columns with responsive support

All grid classes follow the naming convention:

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

📦 1. Container

The .f--container class is one of the most fundamental building blocks of the layout system. We use it as the main wrapper for most modules.

What does it do?

The container provides:

Horizontal spacing (left and right) so that content doesn’t touch the edges of the screen
A maximum width to keep layouts readable and visually balanced
Responsive behavior — it adjusts automatically depending on the screen size (mobile, desktop, ultra-wide, etc.)

This creates consistent horizontal spacing throughout the layout, helping the design feel clean, centered, and visually coherent.

🌊 Fluid modifiers

Sometimes you need the content to go full-width (edge to edge). These use .f--container--fluid , which:

Removes horizontal padding
Resets inner row/column gutters

Useful for banners, background sections, or any module that should break the grid. For that, you can use the 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

📏 2. Row

The .f--row class is used to wrap columns and define a horizontal flex container with controlled spacing between items.

It includes a negative left/right margin to compensate for the padding (gutters) applied by the columns inside. This ensures that all columns align correctly with the container edges.

What it does:

Applies display: flex and enables wrapping
Adds negative margins on the sides to balance the inner column paddings
Ensures that .f—col-* elements inside behave as proper flex items

🧼 Removing Gutters

Sometimes you need a row without any horizontal spacing between columns. For that, you can use .f--row--remove-gutter.

What it does:

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

Example:

<div class="f--container">
  <div class="f--row f--row--remove-gutter">
    <div class="f--col-6">Left</div>
    <div class="f--col-6">Right</div>
  </div>
</div>

🏛️ 3. Columns

The column system is the core of the grid layout. It allows you to split a row into 12 columns, control how much space each part takes, and adapt layouts responsively at different breakpoints. All column classes follow this naming convention:

.f--col-{number}              // Static across all breakpoints
.f--col-{breakpoint}-{number} // Responsive (per breakpoint)

Column sizes

Each column class sets its width based on a 12-column system.

Examples:

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

These classes are generated from a list of allowed sizes, and can be combined across breakpoints for fully responsive layouts.

↔️ Offsets

Offset classes allow you to shift a column to the right within the row, leaving a specific number of columns empty to its left.

Example

.f--offset-1             // Offset by 1 column (static)
.f--offset-tabletl-2     // Offset on tablet large only

Offsets are limited to certain values. They are useful for creating spacing between columns without adding empty elements.

🔁 Order

Order classes let you change the visual order of columns in a .f—row, useful when designing mobile-first layouts with reordering at different breakpoints. Example

.f--order-1
.f--order-tabletl-1

📘 Grid Cheatsheet

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

✅ Example: Grid layout with container, row and columns

<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:

Link to Codepen