Diamond Grid

Rhombic symmetrical diamond column distribution [1, 2, 3, 4, 3, 2, 1] with container-query responsive collapse.

CLI Installation

React

$pnpm dlxexhumaadddiamond-grid--flavor=react

// 01Workbench

Interactive Specification & Studio

layouts

Preset:

Viewport

Fluid 100%

#10

#11

#12

#13

#14

#15

#16

Parameters

4 Props

mode

gap

layout

responsive

// 02Usage

Quick Start & Consumer Example

Copy-paste ready implementation for React (.tsx). Automatically updates when you modify parameters in the Workbench above.

DiamondGridDemo.tsx

React (.tsx)

import React from 'react';
import { DiamondGrid } from '@/components/ui/DiamondGrid';

export default function DiamondGridDemo() {
  return (
    <section className="py-12 bg-background text-foreground">
      <DiamondGrid gap={16} layout="auto" mode="rhombic" className="max-w-4xl mx-auto">
        {Array.from({ length: 16 }).map((_, idx) => (
          <div
            key={idx}
            className="flex aspect-square w-12 sm:w-16 flex-col items-center justify-center rounded-2xl border border-border bg-card/80 p-2 text-center shadow-md backdrop-blur-md transition-all duration-300 hover:scale-105 hover:border-primary"
          >
            <span className="text-3xs font-mono font-bold text-primary">#{idx + 1}</span>
          </div>
        ))}
      </DiamondGrid>
    </section>
  );
}

// 03API Contract

Props & Configuration

Exhaustive parameter contract for Diamond Grid. Validated in the live Studio workbench above and statically checked across all 13 ecosystem templates.

Prop	Type	Default	Description
mode	select	rhombic	Visual rendering mode (classic upright cards in rhombic columns vs 45° tilted diamond cards).
gap	number	16	Spacing between diamond columns and elements in pixels.
layout	select	auto	Rhombic column layout topology (large: 7-col [1,2,3,4,3,2,1], medium: 5-col, small: 3-col).
responsive	boolean	false	Enable collapse to compact grid on narrow mobile screens (< 420px). When disabled (default), preserves authentic rhombic diamond structure across all devices.

mode

select

Visual rendering mode (classic upright cards in rhombic columns vs 45° tilted diamond cards).

Default:rhombic

gap

number

Spacing between diamond columns and elements in pixels.

Default:16

layout

select

Rhombic column layout topology (large: 7-col [1,2,3,4,3,2,1], medium: 5-col, small: 3-col).

Default:auto

responsive

boolean

Enable collapse to compact grid on narrow mobile screens (< 420px). When disabled (default), preserves authentic rhombic diamond structure across all devices.

Default:false

// 04Source Code

Component Source

Component source definition for React (.tsx). Toggle between the clean wrapper and the standalone ejected engine micro-kernel.

DiamondGrid.tsx

import * as React from 'react';
import * as DiamondGridPrimitive from '@exhuma/core';
import { clsx } from 'clsx';

export interface DiamondGridProps extends React.ComponentPropsWithoutRef<typeof DiamondGridPrimitive.DiamondGrid> {
  className?: string;
}

export const DiamondGrid = React.forwardRef<HTMLDivElement, DiamondGridProps>(
  ({ className, children, ...props }, ref) => (
    <DiamondGridPrimitive.DiamondGrid
      ref={ref}
      className={clsx(
        'flex items-center justify-center w-full max-w-6xl mx-auto py-12 overflow-hidden',
        className
      )}
      {...props}
    >
      {children}
    </DiamondGridPrimitive.DiamondGrid>
  )
);
DiamondGrid.displayName = 'DiamondGrid';

export const DiamondColumn = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
  ({ className, children, ...props }, ref) => (
    <DiamondGridPrimitive.DiamondColumn
      ref={ref}
      className={clsx('flex flex-col items-center justify-center', className)}
      {...props}
    >
      {children}
    </DiamondGridPrimitive.DiamondColumn>
  )
);
DiamondColumn.displayName = 'DiamondColumn';

export const DiamondItem = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
  ({ className, children, ...props }, ref) => (
    <DiamondGridPrimitive.DiamondItem
      ref={ref}
      className={clsx('exhuma-diamond-item', className)}
      {...props}
    >
      {children}
    </DiamondGridPrimitive.DiamondItem>
  )
);
DiamondItem.displayName = 'DiamondItem';

// 05Architecture

Lifecycle Safety & Performance

Engineered for high-frequency user interactions with zero memory leaks.

Teardown

Deterministic Cleanup

All pointer event listeners, scroll handlers, and resize observers are cleanly destroyed on component unmount, preventing lingering background processes.

Compositor

GPU Compositor Acceleration

Transform and opacity modifications run directly on the GPU compositor thread using will-change: transform without triggering browser layout recalculations.

// 06a11y

Accessibility Considerations

Fully compliant with WCAG guidelines and respects user motion preferences.

Motion

prefers-reduced-motion Support

When a user has prefers-reduced-motion: reduce enabled in their operating system, Exhuma components automatically disable 3D gyroscope tilt and spring animations, rendering static accessible content.

import React from 'react'; import { DiamondGrid } from '@/components/ui/DiamondGrid'; export default function DiamondGridDemo() { return ( <section className="py-12 bg-background text-foreground"> <DiamondGrid gap={16} layout="auto" mode="rhombic" className="max-w-4xl mx-auto"> {Array.from({ length: 16 }).map((_, idx) => ( <div key={idx} className="flex aspect-square w-12 sm:w-16 flex-col items-center justify-center rounded-2xl border border-border bg-card/80 p-2 text-center shadow-md backdrop-blur-md transition-all duration-300 hover:scale-105 hover:border-primary" > <span className="text-3xs font-mono font-bold text-primary">#{idx + 1}</span> </div> ))} </DiamondGrid> </section> ); }

Prop

Type

Default

Description

mode

select

rhombic

Visual rendering mode (classic upright cards in rhombic columns vs 45° tilted diamond cards).

gap

number

Spacing between diamond columns and elements in pixels.

layout

select

auto

Rhombic column layout topology (large: 7-col [1,2,3,4,3,2,1], medium: 5-col, small: 3-col).

responsive

boolean

false

Enable collapse to compact grid on narrow mobile screens (< 420px). When disabled (default), preserves authentic rhombic diamond structure across all devices.

import * as React from 'react'; import * as DiamondGridPrimitive from '@exhuma/core'; import { clsx } from 'clsx'; export interface DiamondGridProps extends React.ComponentPropsWithoutRef<typeof DiamondGridPrimitive.DiamondGrid> { className?: string; } export const DiamondGrid = React.forwardRef<HTMLDivElement, DiamondGridProps>( ({ className, children, ...props }, ref) => ( <DiamondGridPrimitive.DiamondGrid ref={ref} className={clsx( 'flex items-center justify-center w-full max-w-6xl mx-auto py-12 overflow-hidden', className )} {...props} > {children} </DiamondGridPrimitive.DiamondGrid> ) ); DiamondGrid.displayName = 'DiamondGrid'; export const DiamondColumn = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>( ({ className, children, ...props }, ref) => ( <DiamondGridPrimitive.DiamondColumn ref={ref} className={clsx('flex flex-col items-center justify-center', className)} {...props} > {children} </DiamondGridPrimitive.DiamondColumn> ) ); DiamondColumn.displayName = 'DiamondColumn'; export const DiamondItem = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>( ({ className, children, ...props }, ref) => ( <DiamondGridPrimitive.DiamondItem ref={ref} className={clsx('exhuma-diamond-item', className)} {...props} > {children} </DiamondGridPrimitive.DiamondItem> ) ); DiamondItem.displayName = 'DiamondItem';