← →

Grid

`<pura-grid>` is a native web component that wraps a CSS grid container, exposing layout controls through plain attributes. A bare integer on `cols` or `rows` expands to `repeat(n, 1fr)`, while any other value is passed through as a raw track list, and `gap` accepts the theme space scale (1-6) or any CSS length. When `cols` is omitted, it falls back to a responsive `auto-fit` layout driven by `min`, defaulting to a sensible 16rem minimum track.

Preview

<pura-grid cols="3" gap="3">
  <div>One</div>
  <div>Two</div>
  <div>Three</div>
</pura-grid>

<pura-grid cols="1fr 2fr" gap="4" align="center">
  <div>Sidebar</div>
  <div>Main content area</div>
</pura-grid>

<pura-grid min="12rem" gap="2">
  <div>Auto-fit A</div>
  <div>Auto-fit B</div>
  <div>Auto-fit C</div>
  <div>Auto-fit D</div>
</pura-grid>
<script type="module" src="/pura/lib/grid.js"></script>

Attributes

Attribute	Type	Default	Description
`cols`	number \| string	—	Column tracks: a bare integer becomes repeat(n, 1fr), or pass a raw track list such as "1fr 2fr" or "200px 1fr". When omitted, falls back to a responsive auto-fit layout.
`rows`	number \| string	none	Row tracks: a bare integer becomes repeat(n, 1fr), or pass a raw track list.
`gap`	number \| string	4	Gap between items: a space scale value (1-6) maps to var(--pura-space-N), or any CSS length such as "2rem".
`align`	string	stretch	align-items value (start, center, end, stretch, baseline...).
`justify`	string	stretch	justify-items value (start, center, end, stretch...).
`flow`	string	row	grid-auto-flow value (row, column, dense, "row dense"...).
`min`	string	16rem	Minimum track size for the responsive auto-fit fallback, applied only when cols is not set.

Installation

pura is copy-paste and dependency-free. Load the whole library, or just this component.

HTML

<link rel="stylesheet" href="/pura/tokens.css">
<script type="module" src="/pura/lib/grid.js"></script>

JavaScript

import "./pura/lib/grid.js";

Slots

default