Grid

The grid system is built around wf-grid with size presets ( wf-grid-2 , wf-grid-3 , wf-grid-12 ) and span utilities ( wf-span-* ) for precise placement.

Basic Grid

Basic 3-Column Grid

A straightforward equal-width layout.

Item 1

Item 2

Item 3

<div class="wf-grid wf-grid-3 wf-gap-3">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</div>

Live Examples

12-Column with Spans

Use span utilities for magazine and dashboard compositions.

screen

<div class="wf-grid wf-grid-12 wf-gap-3">
  <div class="wf-span-8">Main</div>
  <div class="wf-span-4">Side</div>
  <div class="wf-span-3">A</div>
  <div class="wf-span-6">B</div>
  <div class="wf-span-3">C</div>
</div>

Grid Auto Wrapping

Mobile Override max 42rem

Use .wf-grid-auto for auto-wrapping rows. This example intentionally uses 16 items, so wrapping behavior is clear at different widths.

screen

<div class="wf-grid-auto ...">
    <div>...</span></div>
    <div>...</div>
    <!-- ... -->
</div>

Responsive Span Overrides

Mobile Override max 42rem

On small screens every span collapses to full-width via wf-mobile-span-12 .

Override any span at a specific breakpoint using wf-mobile-span-* , wf-tablet-span-* , and wf-screen-span-* . These classes apply inside their respective @media blocks, so they only override at that breakpoint.

screen

<div class="wf-grid wf-grid-12 wf-gap-3">
  <div class="wf-span-8 wf-mobile-span-12">Main</div>
  <div class="wf-span-4 wf-mobile-span-12">Side</div>
  <div class="wf-span-3 wf-mobile-span-6">A</div>
  <div class="wf-span-6 wf-mobile-span-12">B</div>
  <div class="wf-span-3 wf-mobile-span-6">C</div>
</div>

Tablet Override 62–80 rem

Rebalance a 12-column layout for mid-size screens with wf-tablet-span-* .

span-8 → tablet: 6

span-4 → tablet: 6

span-4 = tablet: 4

<div class="wf-grid wf-grid-12 wf-gap-3">
  <div class="wf-span-8 wf-tablet-span-6">A</div>
  <div class="wf-span-4 wf-tablet-span-6">B</div>
  <div class="wf-span-4 wf-tablet-span-4">C</div>
  <div class="wf-span-4 wf-tablet-span-4">D</div>
  <div class="wf-span-4 wf-tablet-span-4">E</div>
</div>

Screen Override >80 rem

Expand spans on large screens for a wider information density with wf-screen-span-* .

span-6 → screen: 3

<div class="wf-grid wf-grid-12 wf-gap-3">
  <div class="wf-span-6 wf-screen-span-3">A</div>
  <div class="wf-span-6 wf-screen-span-3">B</div>
  <div class="wf-span-6 wf-screen-span-3">C</div>
  <div class="wf-span-6 wf-screen-span-3">D</div>
</div>

Lattice with Mixed Cells

Responsive Lattice

Use .wf-lattice with a 12-column grid and mixed span sizes. In responsive preview, switch breakpoints to watch borders reflow cleanly as cells collapse into smaller layouts.

screen

<div class="wf-grid wf-grid-12 wf-lattice ...">
    <div class="wf-lattice-item ..."> ... </div>
    <div class="wf-lattice-item ..."> ... </div>
    <!-- ... -->
</div>

Gap Utilities

Gap Scale

Gap utilities let you tune spacing density per layout block using .wf-gap-* modifiers.

gap-4

gap-6

<div class="wf-grid wf-grid-3 wf-gap-4">...</div>
<div class="wf-grid wf-grid-3 wf-gap-6">...</div>

Class Reference

All modifier classes available on .wf-grid

Class Name	Type	Description
wf-grid	Base	Creates the grid container and applies responsive defaults.
wf-grid-auto	Columns	Defines automatic column count based on content.
wf-grid-2 ... wf-grid-12	Columns	Defines explicit column count for controlled layouts.
wf-span-1 ... wf-span-12	Span	Controls how many columns a child item occupies.
wf-lattice-*	Columns	Auto border positioning, depending on screen size.
wf-gap-*	Spacing	Adjusts the grid gap without writing custom CSS.