Grid

A 12-column responsive grid system. Columns collapse to full-width on mobile automatically.

Preview · Grid

Code

HTML · @primus/ui-core
React
Angular

<div style="width:100%;display:flex;flex-direction:column;gap:12px">
  <!-- 3 equal columns -->
  <div style="display:grid;grid-template-columns:repeat(3,1fr);gap:12px">
    <div style="background:var(--card);border:1px solid var(--border);border-radius:6px;padding:12px;text-align:center;font-size:0.875rem">col-4</div>
    <div style="background:var(--card);border:1px solid var(--border);border-radius:6px;padding:12px;text-align:center;font-size:0.875rem">col-4</div>
    <div style="background:var(--card);border:1px solid var(--border);border-radius:6px;padding:12px;text-align:center;font-size:0.875rem">col-4</div>
  </div>
  <!-- Sidebar + content (3/9 split) -->
  <div style="display:grid;grid-template-columns:1fr 3fr;gap:12px">
    <div style="background:var(--card);border:1px solid var(--border);border-radius:6px;padding:12px;text-align:center;font-size:0.875rem">col-3 Sidebar</div>
    <div style="background:var(--card);border:1px solid var(--border);border-radius:6px;padding:12px;text-align:center;font-size:0.875rem">col-9 Main Content</div>
  </div>
  <!-- 4 stat cards -->
  <div style="display:grid;grid-template-columns:repeat(4,1fr);gap:12px">
    <div style="background:var(--card);border:1px solid var(--border);border-radius:6px;padding:12px;text-align:center;font-size:0.8rem">col-3</div>
    <div style="background:var(--card);border:1px solid var(--border);border-radius:6px;padding:12px;text-align:center;font-size:0.8rem">col-3</div>
    <div style="background:var(--card);border:1px solid var(--border);border-radius:6px;padding:12px;text-align:center;font-size:0.8rem">col-3</div>
    <div style="background:var(--card);border:1px solid var(--border);border-radius:6px;padding:12px;text-align:center;font-size:0.8rem">col-3</div>
  </div>
</div>

import { Grid } from 'primus-react-ui';

<Grid columns={3} gap="md">
  <div>Col 1</div>
  <div>Col 2</div>
  <div>Col 3</div>
</Grid>

{/* Sidebar + content */}
<Grid columns={4} gap="md">
  <div style={{ gridColumn: 'span 1' }}>Sidebar</div>
  <div style={{ gridColumn: 'span 3' }}>Main Content</div>
</Grid>

<primus-grid [columns]="3" gap="md">
  <div>Col 1</div>
  <div>Col 2</div>
  <div>Col 3</div>
</primus-grid>

<primus-grid [columns]="4" gap="md">
  <div style="grid-column:span 1">Sidebar</div>
  <div style="grid-column:span 3">Main Content</div>
</primus-grid>

Props

Prop	Type	Default	Description
`columns`	`1 \| 2 \| 3 \| 4 \| 6 \| 12`	`3`	Number of columns
`gap`	`none \| sm \| md \| lg`	`md`	Gap between items
`responsive`	`boolean`	`true`	Collapse to single column on mobile

Version history

See the Changelog for version history and breaking changes.

Code​

Props​

Code

Props