Skip to Content
FoundationGrid

Grid

Apollo Vertex uses a 12-column layout grid built on Tailwind CSS 4’s grid utilities and the 4px spacing base unit. The grid adapts across three breakpoints, scaling columns, gutters, and margins to the available viewport.

Layout Grid

The layout grid defines the fundamental structure of every page and surface. Columns provide horizontal rhythm, gutters separate content regions, and margins create breathing room from the viewport edges.

Breakpoint Specs

BreakpointPrefixMin widthColumnsGutterMargin
Mobile—0px416px / gap-416px / px-4
Tabletsm:640px816px / gap-424px / px-6
Desktoplg:1024px1216px / gap-432px / px-8

Column Structure

Mobile — 4 columns

1
2
3
4
4 columns16px gutter16px margin

Tablet — 8 columns

1
2
3
4
5
6
7
8
8 columns16px gutter24px margin

Desktop — 12 columns

1
2
3
4
5
6
7
8
9
10
11
12
12 columns16px gutter32px margin

Usage

All grid layouts follow the same composition: a container for margins, a grid wrapper for columns and gutters, and child elements spanning one or more columns.

// Standard page layout
<main className="px-4 sm:px-6 lg:px-8">
  <div className="grid grid-cols-4 sm:grid-cols-8 lg:grid-cols-12 gap-4">
    <section className="col-span-4 sm:col-span-5 lg:col-span-8">
      {/* Main content */}
    </section>
    <aside className="col-span-4 sm:col-span-3 lg:col-span-4">
      {/* Sidebar */}
    </aside>
  </div>
</main>

Grid gaps use the same 4px base unit as all other spacing. gap-4 = 16px across all breakpoints.

SpacingTypography