Holo Grid

The holo-grid is a layout component designed to arrange children in a clean CSS grid. It features configurable column counts and gap sizes based on the design system’s spacing tokens, and automatically collapses to a single-column layout on smaller screens.

When to use

Use it for:

• Laying out equal-width columns of cards or tiles with a consistent gap (cols, gap).
• Dashboards and galleries where items share a visual weight.

Don’t use it for:

• A single column or row of items. Use Stack.
• Tabular data with rows and columns of related values. Use Table.
• Constraining page width. Use Container.

Live Preview

Three-Column Grid (Default)

Below is an interactive live preview of a 3-column layout featuring standard cards.

Vector Grid

A multi-dimensional geometric matrix designed for high-throughput spatial analysis.

Quantum Array

Dynamic quantum entanglement coordinates mapped onto a sub-atomic grid layout.

Holographic Core

Centralized optical beam emitter generating synthetic voxel architectures.

<holo-grid cols="3" gap="md">
  <div>Vector Grid</div>
  <div>Quantum Array</div>
  <div>Holographic Core</div>
</holo-grid>

Two-Column Grid with Large Gap

You can also specify lower or higher column counts, alongside larger or smaller gap spacings:

Flux Capacitor

Regulates electromagnetic flow across temporal interfaces inside the grid.

Chronal Engine

Synchronizes state updates with local spacetime frames of reference.

<holo-grid cols="2" gap="lg">
  <div>Flux Capacitor</div>
  <div>Chronal Engine</div>
</holo-grid>

Accessibility

The grid is a presentational CSS layout. It renders a slot with no role, no landmark and no focus behaviour, and it does not change the reading order. Screen readers and keyboard users move through children in DOM order.

You provide:

• A DOM order that matches the visual order you want people to read and tab through.
• Real structure for what the grid holds, such as headings, lists or cards. Do not use it to present tabular data.

API Reference

Importing

import '@philbob-sideprojects/hololink-ui/holo-grid';

Properties

Property	Attribute	Type	Default	Description
cols	cols	number	3	The number of columns in the grid for screens larger than 768px.
gap	gap	"lg" | "md" | "sm"	'md'	The gap size between grid items: "sm" (--s-space-xs, 8px), "md" (--s-space-md, 16px), or "lg" (--s-space-xl, 32px).

Slots

Slot	Description
(default)	The items to place in the grid.