Grid System

Ontopix maintains distinct grid definitions per context. Each context has its own reading rhythm and measure, so one-grid-fits-all produces layouts that feel awkward in at least one place. Pick the context first, then the span.

Web

Responsive web grid system

Column Spans

Common Patterns

<!-- Content + sidebar -->
<div class="grid grid-cols-12 gap-6">
  <main class="col-span-12 lg:col-span-8">Content</main>
  <aside class="col-span-12 lg:col-span-4">Sidebar</aside>
</div>

<!-- Three columns -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
  <div>Card 1</div><div>Card 2</div><div>Card 3</div>
</div>

Docs

Documentation and content grid

Docs prefer a narrow measure for legibility. Prose sections should cap around the docs.max_width token even inside wider page layouts.

Print

Print layout specifications

Paper Sizes

Margins

• Standard: {'top': '1in', 'bottom': '1in', 'left': '1in', 'right': '1in'}
• Narrow: {'top': '0.75in', 'bottom': '0.75in', 'left': '0.75in', 'right': '0.75in'}
• Wide: {'top': '1in', 'bottom': '1in', 'left': '1.5in', 'right': '1.5in'}

Bleed: 0.125in · Safe zone: 0.25in

Dashboard

Dashboard and application grid

Dashboards follow a persistent left-sidebar, top-header frame. Inner content uses the same 12-column web grid inside the main region.

Presentation

Slide and presentation layouts

16:9 Slide

• Width: 1920
• Height: 1080
• Safe area: {'top': 80, 'bottom': 80, 'left': 120, 'right': 120}

Zones

Breakpoints

Start mobile-first. Design for the smallest breakpoint first, then expand with sm:, md:, lg: prefixes.

Related

• Spacing — Base unit and spacing scale
• Channels — Which grid applies to each channel template