Responsive Layout System & Grid

Breakpoints

Defined in packages/web-tailwind/partials/grid.css as @theme CSS custom properties:

All breakpoints are mobile-first — styles apply at the named breakpoint and up.

Core Layout Utilities

container

Full-width fluid wrapper that transitions to a fixed-width centered layout at larger breakpoints. Overrides Tailwind's default container. This is what powers our layout most of the time - it assures all containers break at the same place.

The switch from fluid to fixed at xl uses margin-inline: auto and drops horizontal padding entirely — the fixed width provides the visual margin.

grid-container

CSS grid that increases column count as the viewport grows. Uses minmax(0, 1fr) columns to prevent overflow.

Note: This class does not constrain the element's width - it will always stretch to the width of its parent.

Section Component

packages/web-ui/components/Sections/Section.tsx

The primary semantic layout wrapper for all page sections. Handles:

• Renders a <section> tag (or <header> when isHeader={true})
• Applies py-12 md:py-16 vertical padding (48px mobile → 64px desktop)
• Wraps children in .container by default (hasContainer prop, default: true)
• Optional dark/light color modes, background images, gradient backgrounds, and baton stroke decorations

Props

Typical Page Layout Hierarchy

<Section>
  {/* container applied automatically by Section */}
  <div className='grid-container'>
    <div className='col-span-4 lg:col-span-8 lg:col-start-3'>
      {/* Centered content */}
    </div>
  </div>
</Section>

Section                        ← semantic <section> + py-12/py-16 + .container
  └── .grid-container          ← 4 → 8 → 12 column CSS grid
        └── .col-span-X        ← grid item spanning X columns
              └── child content

Common Column Patterns

Full-width row

<div className='col-span-4 sm:col-span-8 lg:col-span-12'>

Centered narrow block (8 of 12 columns)

<div className='col-span-4 lg:col-span-8 lg:col-start-3'>
  {/* col-start-3 offsets 2 columns on each side (2 + 8 + 2 = 12) */}

Centered medium block (10 of 12 columns)

<div className='col-span-4 lg:col-span-10 lg:col-start-2'>
  {/* 1 column margin on each side */}

Two-column split (1/3 + 2/3)

<div className='col-span-4 lg:col-span-4'>{/* Content */}</div>
<div className='col-span-4 lg:col-span-8'>{/* Image */}</div>

Two-column split (5:6 ratio, right-anchored)

<div className='col-span-12 lg:col-span-5'>{/* Tabs list */}</div>
<div className='col-span-12 lg:col-span-6 lg:col-end-13'>{/* Tab panels */}</div>

Mobile Stacking

Components default to full-width at mobile (col-span-4) and expand to their intended column spans at lg:

{/* Stacks on mobile, side-by-side at lg */}
<div className='col-span-4 lg:col-span-6'>Left</div>
<div className='col-span-4 lg:col-span-6'>Right</div>

For flex-based stacking before the grid kicks in:

{/* Flex stack on mobile, grid on md+ */}
<div className='flex flex-col gap-12 md:grid md:grid-container'>

Source Files