Foundations / Grid

Grid

The Flux layout grid provides consistent positioning and spacing across all pages and viewports. It defines columns, gutters, and margins to create layouts that are predictable for both designers and developers — using Tailwind's responsive grid utilities.

Grid anatomy

Every Flux layout grid is composed of three elements that work together to position content.

Columns

↕

Gutters

Columns

Divide the page into equal vertical sections. Content spans across columns.

Gutters

The gaps between columns that separate content in a consistent way.

Margins

Outer edges of the grid that prevent content from touching the viewport edge.

Grid types

Flux supports two grid types. Choose based on the content density and purpose of the page.

Fluid

The fluid grid stretches to fill all available space. Columns and content resize with the viewport. Best for information-dense pages like dashboards, data tables, and kanban boards where maximising screen real estate matters.

w-full max-w-none — grid fills the full container width at every breakpoint

Fixed

The fixed grid applies a maximum content width, centering it within the viewport. Best for content-focused pages like articles, settings, and documentation — limiting line length improves readability.

max-w-3xl mx-auto — content constrained and centered

Breakpoints

Flux aligns with Tailwind CSS's default breakpoint system. Each breakpoint determines column count, gutter width, and margin size. Use responsive prefixes in Tailwind to adapt layouts at each breakpoint.

Breakpoint	Viewport	Columns	Gutters	Margins	Tailwind prefix
`xs`	< 640px	4	12px	16px	`—`
`sm`	640 – 767px	6	12px	16px	`sm:`
`md`	768 – 1023px	8	16px	24px	`md:`
`lg`	1024 – 1279px	12	16px	32px	`lg:`
`xl`	1280 – 1535px	12	16px	32px	`xl:`
`2xl`	≥ 1536px	12	24px	40px	`2xl:`

Column span and offset

Flux uses a 12-column grid. Content spans across columns using Tailwind'scol-span-*utilities. Mix column spans to create flexible, varied layouts.

Column span

col-span-12 (full width)

col-span-6 (half width)

col-span-4 (one third)

col-span-3 (one quarter)

Column offset

Content doesn't need to span all 12 columns. Usecol-start-*to offset content, centering it within the grid or creating asymmetric layouts.

col-start-1, col-span-8

col-start-3, col-span-8 (offset 2)

col-start-4, col-span-6 (centered)

Layout anatomy

A typical Flux app layout is composed of a fixed header, an optional sidebar, and a fluid main content area. The grid lives within the main content area and adapts based on which panels are visible.

Header

Fixed top bar — always visible, 56px tall

Sidebar / Side nav

Collapsible at 56px (icons only) or expanded at 240px

Main content

Fluid area where the layout grid lives

Side navigation sizes

The sidebar can be collapsed to icon-only mode or expanded. The main content grid automatically fills the remaining space.

State	Width	Available from	Behaviour
Collapsed	60px	768px+	Icon-only navigation, labels hidden. Grid fills remaining width.
Expanded (default)	240px	1024px+	Full labels visible. Grid adapts to remaining width.
Expanded (wide)	280px	1440px+	Extra width for longer nav labels or nested items.
Hidden	0px	< 768px	Off-canvas drawer, toggled by hamburger in topbar.

Using the grid in Tailwind

Flux doesn't add a custom grid component — Tailwind's grid utilities are expressive enough. Here are the patterns used across Flux products.

Basic 3-column stats row

<div className="grid grid-cols-1 gap-4 sm:grid-cols-3">
  <StatCard />
  <StatCard />
  <StatCard />
</div>

Sidebar + content layout

<div className="flex min-h-screen">
  <SideNav className="w-60 shrink-0" />
  <main className="flex-1 min-w-0 p-6">
    {children}
  </main>
</div>

Responsive card grid

<div className="grid gap-4
  grid-cols-1
  sm:grid-cols-2
  lg:grid-cols-3
  xl:grid-cols-4">
  {cards.map(c => <Card key={c.id} {...c} />)}
</div>

Fixed-width content

<main className="mx-auto w-full
  max-w-3xl
  px-4
  py-8
  sm:px-6
  lg:px-8">
  {children}
</main>