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.

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>

API Reference

Properties

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

Slots

| Slot Name | Description | | --------- | --------------------------------------------- | | (default) | The children elements placed inside the grid. |

Design System Integration

The component translates the gap property to primitive design tokens declared in tokens.css:

| CSS Variable | Token Reference | Size Value | Description | | ------------------ | ----------------- | -------------- | --------------------------------- | | var(--p-space-2) | Primitive Spacing | 0.5rem (8px) | Applied when gap="sm" | | var(--p-space-4) | Primitive Spacing | 1rem (16px) | Applied when gap="md" (default) | | var(--p-space-8) | Primitive Spacing | 2rem (32px) | Applied when gap="lg" |

Responsiveness

To ensure accessible and legible viewports on mobile devices:

• Mobile (< 768px): The grid automatically collapses to a single vertical column (grid-template-columns: 1fr).
• Tablet / Desktop (>= 768px): The grid displays using the specified number of columns (cols).