Components · Layout
Grid
A CSS-grid container — a fixed column count or a responsive auto-fit, with the DS gutter scale, track justify/align, and a responsive collapse.
Examples
Columns
Gutter
Justify
Responsive collapse
Grid · fixed columns · gutter [h,v] · justify / align · responsive collapse
Poll
Quiz
Word cloud
Q&A
Brainstorm
Spinner
Responsive · min 200 · gap large
Auto A
Auto B
Auto C
Auto D
<!-- Paste-and-run: save as .html and open in a browser. No build step.
<aha-grid> is the SAME shared custom element React and Vue consume — here in its
native form. Theming comes only from the --aha-* tokens in tokens.css. -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/ahaslides-product/ahaslides-design@master/lib/tokens.css">
<script type="module">
import 'https://cdn.jsdelivr.net/gh/ahaslides-product/ahaslides-design@master/lib/aha-grid.js'; // registers <aha-grid>
</script>
<!-- fixed three-column grid; gutter [h,v] → 16 horizontal / 8 vertical, on the DS scale -->
<aha-grid columns="3" gap="middle small">
<div>Card A</div>
<div>Card B</div>
<div>Card C</div>
<div>Card D</div>
<div>Card E</div>
<div>Card F</div>
</aha-grid>
<!-- fixed columns that reflow to fewer on narrow widths (no media queries) -->
<aha-grid columns="4" responsive gap="middle" style="margin-top:24px">
<div>Reflow A</div>
<div>Reflow B</div>
<div>Reflow C</div>
<div>Reflow D</div>
</aha-grid>
<!-- responsive auto-fit: tracks are at least 220px wide, the count follows the container -->
<aha-grid min="220" gap="large" justify="center" style="margin-top:24px">
<div>Auto A</div>
<div>Auto B</div>
<div>Auto C</div>
</aha-grid>
import '@ahaslides-product/design/aha-grid'; // registers <aha-grid>
// A static layout primitive — the custom element renders identically in React, no wrapper needed.
// gutter [h,v] via `gap="middle small"`, plus justify/align of the tracks.
<aha-grid columns="3" gap="middle small" align="center">
{cards.map((c) => <Card key={c.id} {...c} />)}
</aha-grid>
// Fixed columns that collapse to fewer on narrow widths — `responsive`, no media queries.
<aha-grid columns="4" responsive gap="middle">
{tiles.map((t) => <Tile key={t.id} {...t} />)}
</aha-grid>
// Responsive auto-fit: the column count follows the container width.
<aha-grid min="220" gap="large">
{items.map((i) => <Tile key={i.id} {...i} />)}
</aha-grid>
// main.ts — register the element + mark aha-* as custom elements
import '@ahaslides-product/design/aha-grid';
app.config.compilerOptions.isCustomElement = (tag) => tag.startsWith('aha-');
// Component.vue
<template>
<!-- gutter [h,v] via gap="middle small", plus justify/align of the tracks -->
<aha-grid columns="3" gap="middle small" align="center">
<Card v-for="c in cards" :key="c.id" v-bind="c" />
</aha-grid>
<!-- Fixed columns that collapse to fewer on narrow widths — responsive, no media queries -->
<aha-grid columns="4" responsive gap="middle">
<Tile v-for="t in tiles" :key="t.id" v-bind="t" />
</aha-grid>
<!-- Responsive auto-fit: the column count follows the container width -->
<aha-grid min="220" gap="large">
<Tile v-for="i in items" :key="i.id" v-bind="i" />
</aha-grid>
</template>
API
| Prop | Type | Default | Notes |
|---|---|---|---|
columns | number | — | Fixed number of equal-width columns (minmax(0, 1fr) tracks) |
min | number | — | Minimum track width for a responsive auto-fit grid; wins over columns |
gap | none | small | middle | large | number | "h v" | 0 | Gutter between cells — a named DS step (8/16/24) / raw px, or two values "h v" for a separate horizontal/vertical gutter |
gutter | same as gap | — | Alias of gap (AntD Row vocabulary); gap wins if both are set |
justify | start | center | end | space-between | space-around | space-evenly | — | Horizontal distribution of the tracks (justify-content) |
align | start | center | end | stretch | — | Vertical alignment of the cells within their row (align-items) |
responsive | boolean | false | With columns=N, lets tracks collapse to fewer as the container narrows — no media queries |
Install
# .npmrc — once: point the @ahaslides-product scope at GitHub Packages
@ahaslides-product:registry=https://npm.pkg.github.com
//npm.pkg.github.com/:_authToken=${GITHUB_TOKEN} # a GitHub token with read:packages
npm i @ahaslides-product/design
import '@ahaslides-product/design/tokens.css'; // once, at the app root
import '@ahaslides-product/design/aha-grid'; // registers <aha-grid>
Agent feed for this component (absolute, fetchable anywhere): grid.agent.json · grid.md · grid.llms.txt
When to use
When to use
- Grid — a two-dimensional layout — a card gallery, a stat row, an image grid
- Flex — a one-dimensional flow where items size to content
- min (auto-fit) — the column count should follow the container width — prefer it over media queries
Reach for `min` (auto-fit) or `responsive` before hand-writing breakpoints — the grid reflows itself. Use `gap="h v"` when rows need tighter spacing than columns. Keep gutters on the named scale so spacing matches the rest of the surface. Grid is layout, never decoration: it paints no background.
Surfaces
editor dashboard settings audience
Spec
Display grid · Columns columns=N → repeat(N, minmax(0, 1fr)) · Auto-fit min=W → repeat(auto-fit, minmax(W, 1fr)) · Responsive collapse columns=N + responsive → tracks reflow to fewer as the container narrows · Gutter scale none 0 · small 8 · middle 16 · large 24 (or a raw px number) · Gutter [h,v] gap="h v" → separate column-gap / row-gap · Justify start · center · end · space-between · space-around · space-evenly (justify-content) · Align start · center · end · stretch (align-items)