Auto Grid

Responsive CSS Grid with auto-fit / auto-fill minmax repeat tracks with zero media queries.

CLI Installation

React

$pnpm dlxexhumaaddauto-grid--flavor=react

// 01Workbench

Interactive Specification & Studio

layouts

Preset:

Viewport

Fluid 100%

PIPELINEGRID #01

High-Throughput Kinetic Pipeline

Automated repeat tracks expanding fluidly to consume available viewport space with zero layout thrash.

Mode: auto-fit0.14ms Frame

COMPLIANCEGRID #02

Dynamic MinMax Constraint Engine

Evaluates minmax(min(100%, 280px), 1fr) to guarantee zero mobile horizontal scroll overflow.

Mode: auto-fit280px Floor

VITALSGRID #03

Sub-Pixel Layout Stability

Fractional unit distribution across browser render passes preventing cumulative layout shift (CLS = 0.00).

Mode: auto-fitCLS: 0.00

PHYSICSGRID #04

Hermite Damped Track Transition

Column wrapping transitions with fluid visual hierarchy and balanced element distribution.

Mode: auto-fitHermite Smooth

UNIVERSALGRID #05

Cross-Ecosystem Universal Grid

Zero-runtime pure CSS grid templates compiled for Vue, Svelte, Angular, Solid, and modern web frameworks.

Mode: auto-fit13 Flavors

AUDITGRID #06

Zero Memory Leak Architecture

Stateless declarative container avoiding persistent listener references or uncollected DOM observers.

Mode: auto-fit0 Heap Leaks

Parameters

5 Props

minItemWidth

gap

mode

maxColumns

alignItems

// 02Usage

Quick Start & Consumer Example

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

AutoGridDemo.tsx

React (.tsx)

import React from 'react';
import { AutoGrid, AutoGridItem } from '@/components/ui/AutoGrid';

const ITEMS = [
  { id: '01', tag: 'PIPELINE', title: 'High-Throughput Kinetic Pipeline', desc: 'Automated repeat tracks expanding fluidly with zero layout thrashing.', metric: '0.14ms Frame' },
  { id: '02', tag: 'COMPLIANCE', title: 'Dynamic MinMax Constraint Engine', desc: 'Evaluates minmax(min(100%, 280px), 1fr) for zero horizontal scroll overflow.', metric: '280px Floor' },
  { id: '03', tag: 'VITALS', title: 'Sub-Pixel Layout Stability', desc: 'Fractional unit distribution across render passes (CLS = 0.00).', metric: 'CLS: 0.00' },
  { id: '04', tag: 'PHYSICS', title: 'Hermite Damped Track Transition', desc: 'Column wrapping transitions with fluid visual hierarchy and balanced element distribution.', metric: 'Hermite Smooth' },
  { id: '05', tag: 'UNIVERSAL', title: 'Cross-Ecosystem Universal Grid', desc: 'Zero-runtime pure CSS grid templates compiled for Vue, Svelte, Angular, Solid, and modern web frameworks.', metric: '13 Flavors' },
  { id: '06', tag: 'AUDIT', title: 'Zero Memory Leak Architecture', desc: 'Stateless declarative container avoiding persistent listener references.', metric: '0 Heap Leaks' },
];

export function AutoGridDemo() {
  return (
    <section className="p-8 bg-background text-foreground">
      <AutoGrid
        minItemWidth={280}
        gap={24}
        mode="auto-fit"
        maxColumns={4}
        alignItems="stretch"
        className="max-w-6xl mx-auto"
      >
        {ITEMS.map((item) => (
          <AutoGridItem key={item.id}>
            <div className="h-full rounded-2xl border border-border/80 bg-card p-6 shadow-xs flex flex-col justify-between">
              <div>
                <span className="text-3xs font-mono font-bold text-primary">{item.tag}</span>
                <h3 className="font-bold text-base mt-2">{item.title}</h3>
                <p className="text-muted-foreground text-xs mt-2">{item.desc}</p>
              </div>
              <div className="mt-4 pt-3 border-t border-border/40 flex justify-between text-3xs font-mono">
                <span>GRID #{item.id}</span>
                <span className="text-emerald-400 font-bold">{item.metric}</span>
              </div>
            </div>
          </AutoGridItem>
        ))}
      </AutoGrid>
    </section>
  );
}

// 03API Contract

Props & Configuration

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

Prop	Type	Default	Description
minItemWidth	number	280	Minimum width of each grid column before wrapping to the next line.
gap	number	24	Gap between grid items.
mode	select	auto-fit	Determines whether tracks collapse to stretch items or stay fixed.
maxColumns	number	4	Upper constraint on maximum columns allowed.
alignItems	select	stretch	Cross-axis vertical alignment for items within grid rows.

minItemWidth

number

Minimum width of each grid column before wrapping to the next line.

Default:280

gap

number

Gap between grid items.

Default:24

mode

select

Determines whether tracks collapse to stretch items or stay fixed.

Default:auto-fit

maxColumns

number

Upper constraint on maximum columns allowed.

Default:4

alignItems

select

Cross-axis vertical alignment for items within grid rows.

Default:stretch

// 04Source Code

Component Source

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

AutoGrid.tsx

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

export interface AutoGridProps extends React.ComponentPropsWithoutRef<typeof AutoGridPrimitive.AutoGrid> {
  className?: string;
}

export const AutoGrid = React.forwardRef<HTMLDivElement, AutoGridProps>(
  ({ className, children, ...props }, ref) => (
    <AutoGridPrimitive.AutoGrid
      ref={ref}
      className={clsx(
        'grid grid-cols-[repeat(auto-fill,minmax(min(100%,280px),1fr))] gap-6 w-full',
        className
      )}
      {...props}
    >
      {children}
    </AutoGridPrimitive.AutoGrid>
  )
);
AutoGrid.displayName = 'AutoGrid';

export const AutoGridItem = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
  ({ className, children, ...props }, ref) => (
    <AutoGridPrimitive.AutoGridItem
      ref={ref}
      className={clsx('', className)}
      {...props}
    >
      {children}
    </AutoGridPrimitive.AutoGridItem>
  )
);
AutoGridItem.displayName = 'AutoGridItem';

// 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 { AutoGrid, AutoGridItem } from '@/components/ui/AutoGrid'; const ITEMS = [ { id: '01', tag: 'PIPELINE', title: 'High-Throughput Kinetic Pipeline', desc: 'Automated repeat tracks expanding fluidly with zero layout thrashing.', metric: '0.14ms Frame' }, { id: '02', tag: 'COMPLIANCE', title: 'Dynamic MinMax Constraint Engine', desc: 'Evaluates minmax(min(100%, 280px), 1fr) for zero horizontal scroll overflow.', metric: '280px Floor' }, { id: '03', tag: 'VITALS', title: 'Sub-Pixel Layout Stability', desc: 'Fractional unit distribution across render passes (CLS = 0.00).', metric: 'CLS: 0.00' }, { id: '04', tag: 'PHYSICS', title: 'Hermite Damped Track Transition', desc: 'Column wrapping transitions with fluid visual hierarchy and balanced element distribution.', metric: 'Hermite Smooth' }, { id: '05', tag: 'UNIVERSAL', title: 'Cross-Ecosystem Universal Grid', desc: 'Zero-runtime pure CSS grid templates compiled for Vue, Svelte, Angular, Solid, and modern web frameworks.', metric: '13 Flavors' }, { id: '06', tag: 'AUDIT', title: 'Zero Memory Leak Architecture', desc: 'Stateless declarative container avoiding persistent listener references.', metric: '0 Heap Leaks' }, ]; export function AutoGridDemo() { return ( <section className="p-8 bg-background text-foreground"> <AutoGrid minItemWidth={280} gap={24} mode="auto-fit" maxColumns={4} alignItems="stretch" className="max-w-6xl mx-auto" > {ITEMS.map((item) => ( <AutoGridItem key={item.id}> <div className="h-full rounded-2xl border border-border/80 bg-card p-6 shadow-xs flex flex-col justify-between"> <div> <span className="text-3xs font-mono font-bold text-primary">{item.tag}</span> <h3 className="font-bold text-base mt-2">{item.title}</h3> <p className="text-muted-foreground text-xs mt-2">{item.desc}</p> </div> <div className="mt-4 pt-3 border-t border-border/40 flex justify-between text-3xs font-mono"> <span>GRID #{item.id}</span> <span className="text-emerald-400 font-bold">{item.metric}</span> </div> </div> </AutoGridItem> ))} </AutoGrid> </section> ); }

Prop

Type

Default

Description

minItemWidth

number

280

Minimum width of each grid column before wrapping to the next line.

gap

number

Gap between grid items.

mode

select

auto-fit

Determines whether tracks collapse to stretch items or stay fixed.

maxColumns

number

Upper constraint on maximum columns allowed.

alignItems

select

stretch

Cross-axis vertical alignment for items within grid rows.

import * as React from 'react'; import * as AutoGridPrimitive from '@exhuma/core'; import { clsx } from 'clsx'; export interface AutoGridProps extends React.ComponentPropsWithoutRef<typeof AutoGridPrimitive.AutoGrid> { className?: string; } export const AutoGrid = React.forwardRef<HTMLDivElement, AutoGridProps>( ({ className, children, ...props }, ref) => ( <AutoGridPrimitive.AutoGrid ref={ref} className={clsx( 'grid grid-cols-[repeat(auto-fill,minmax(min(100%,280px),1fr))] gap-6 w-full', className )} {...props} > {children} </AutoGridPrimitive.AutoGrid> ) ); AutoGrid.displayName = 'AutoGrid'; export const AutoGridItem = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>( ({ className, children, ...props }, ref) => ( <AutoGridPrimitive.AutoGridItem ref={ref} className={clsx('', className)} {...props} > {children} </AutoGridPrimitive.AutoGridItem> ) ); AutoGridItem.displayName = 'AutoGridItem';