Row Masonry

Greedy dynamic row-by-row masonry balancer placing items into the shortest column with GPU translate3d positioning.

CLI Installation

React

$pnpm dlxexhumaaddrow-masonry--flavor=react

// 01Workbench

Interactive Specification & Studio

layouts

Preset:

Viewport

Fluid 100%

120 FPS NATIVE#01

Greedy Column Balancer

Dynamic shortest-column placement

Compositor Thread0.02ms

KINEMATICS#02

GPU Translate3D Flow

Hardware-composited smooth transforms on resize without layout thrashing or inline top/left DOM recalculations.

Placement EngineO(N log K)

“

Row-order bin-packing guarantees authentic left-to-right reading flow with zero cumulative layout shift.

Architecture Core#03

BALANCING#04

Greedy Column Bin-Packing

Batched DOM height reads in a single animation frame to eliminate layout recalculation cascades.

Reflow Batch1 frame

CompositorGPU Native

Column Gap16px Concrete

Universal Native#05

ReactVueSvelteAstroSolid

13 EcosystemsUniversal Native

row-masonry.tsx

#06

<RowMasonry
  columns={3}
  gap={16}
/>

Kinetic EngineZero Jank

Compositor Latency#07

< 0.04ms

GPU IsolatedZero Jitter

RENDER PASS#08

Spatial Void Elimination

Items continually pack into the shortest column height, maintaining balance even as item content resizes dynamically.

Sub-Pixel GridAuto Balanced

WCAG AAA COMPLIANT#09

DOM Order Flow Integrity

Keyboard tab sequence preserved

Screen Reader OKA11y Validated

Parameters

6 Props

columns

columnsSm

columnsMd

columnsLg

columnsXl

gap

// 02Usage

Quick Start & Consumer Example

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

RowMasonryDemo.tsx

React (.tsx)

import React from 'react';
import { RowMasonry, RowMasonryItem } from '@/components/ui/RowMasonry';

const CARDS = [
  { id: '01', title: '120 FPS Native Kinetics', desc: 'Hardware-composited smooth transforms on resize.', height: 'h-40' },
  { id: '02', title: 'Greedy Column Balancer', desc: 'Dynamic shortest-column placement algorithm.', height: 'h-60' },
  { id: '03', title: 'Reading Order Preservation', desc: 'Row-order bin-packing guarantees authentic DOM flow.', height: 'h-48' },
  { id: '04', title: 'Zero Layout Shift', desc: 'Single-frame batched DOM height reads eliminating reflow.', height: 'h-72' },
];

export default function RowMasonryDemo() {
  return (
    <RowMasonry
      columns={1}
      columnsSm={2}
      columnsMd={2}
      columnsLg={3}
      columnsXl={4}
      gap={16}
      className="max-w-5xl mx-auto p-6"
    >
      {CARDS.map((card) => (
        <RowMasonryItem key={card.id}>
          <div className={`border border-border bg-card rounded-xl p-5 ${card.height} flex flex-col justify-between`}>
            <span className="text-xs font-mono text-muted-foreground">#{card.id}</span>
            <div>
              <h4 className="text-sm font-bold">{card.title}</h4>
              <p className="text-xs text-muted-foreground mt-1">{card.desc}</p>
            </div>
          </div>
        </RowMasonryItem>
      ))}
    </RowMasonry>
  );
}

// 03API Contract

Props & Configuration

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

Prop	Type	Default	Description
columns	number	1	Base column count on mobile viewports (<640px).
columnsSm	number	2	Number of columns on small tablet viewports (≥640px).
columnsMd	number	2	Number of columns on medium tablet viewports (≥768px).
columnsLg	number	3	Number of columns on desktop viewports (≥1024px).
columnsXl	number	4	Number of columns on large screens (≥1280px).
gap	number	16	Spacing between masonry columns and items.

columns

number

Base column count on mobile viewports (<640px).

Default:1

columnsSm

number

Number of columns on small tablet viewports (≥640px).

Default:2

columnsMd

number

Number of columns on medium tablet viewports (≥768px).

Default:2

columnsLg

number

Number of columns on desktop viewports (≥1024px).

Default:3

columnsXl

number

Number of columns on large screens (≥1280px).

Default:4

gap

number

Spacing between masonry columns and items.

Default:16

// 04Source Code

Component Source

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

RowMasonry.tsx

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

export interface RowMasonryProps extends React.ComponentPropsWithoutRef<typeof RowMasonryPrimitive.RowMasonry> {
  className?: string;
}

export const RowMasonry = React.forwardRef<HTMLDivElement, RowMasonryProps>(
  ({ className, children, ...props }, ref) => (
    <RowMasonryPrimitive.RowMasonry
      ref={ref}
      className={clsx(
        'w-full relative',
        className
      )}
      {...props}
    >
      {children}
    </RowMasonryPrimitive.RowMasonry>
  )
);
RowMasonry.displayName = 'RowMasonry';

export const RowMasonryItem = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
  ({ className, children, ...props }, ref) => (
    <RowMasonryPrimitive.RowMasonryItem
      ref={ref}
      className={clsx('w-full', className)}
      {...props}
    >
      {children}
    </RowMasonryPrimitive.RowMasonryItem>
  )
);
RowMasonryItem.displayName = 'RowMasonryItem';

// 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 { RowMasonry, RowMasonryItem } from '@/components/ui/RowMasonry'; const CARDS = [ { id: '01', title: '120 FPS Native Kinetics', desc: 'Hardware-composited smooth transforms on resize.', height: 'h-40' }, { id: '02', title: 'Greedy Column Balancer', desc: 'Dynamic shortest-column placement algorithm.', height: 'h-60' }, { id: '03', title: 'Reading Order Preservation', desc: 'Row-order bin-packing guarantees authentic DOM flow.', height: 'h-48' }, { id: '04', title: 'Zero Layout Shift', desc: 'Single-frame batched DOM height reads eliminating reflow.', height: 'h-72' }, ]; export default function RowMasonryDemo() { return ( <RowMasonry columns={1} columnsSm={2} columnsMd={2} columnsLg={3} columnsXl={4} gap={16} className="max-w-5xl mx-auto p-6" > {CARDS.map((card) => ( <RowMasonryItem key={card.id}> <div className={`border border-border bg-card rounded-xl p-5 ${card.height} flex flex-col justify-between`}> <span className="text-xs font-mono text-muted-foreground">#{card.id}</span> <div> <h4 className="text-sm font-bold">{card.title}</h4> <p className="text-xs text-muted-foreground mt-1">{card.desc}</p> </div> </div> </RowMasonryItem> ))} </RowMasonry> ); }

Prop

Type

Default

Description

columns

number

Base column count on mobile viewports (<640px).

columnsSm

number

Number of columns on small tablet viewports (≥640px).

columnsMd

number

Number of columns on medium tablet viewports (≥768px).

columnsLg

number

Number of columns on desktop viewports (≥1024px).

columnsXl

number

Number of columns on large screens (≥1280px).

gap

number

Spacing between masonry columns and items.

import * as React from 'react'; import * as RowMasonryPrimitive from '@exhuma/core'; import { clsx } from 'clsx'; export interface RowMasonryProps extends React.ComponentPropsWithoutRef<typeof RowMasonryPrimitive.RowMasonry> { className?: string; } export const RowMasonry = React.forwardRef<HTMLDivElement, RowMasonryProps>( ({ className, children, ...props }, ref) => ( <RowMasonryPrimitive.RowMasonry ref={ref} className={clsx( 'w-full relative', className )} {...props} > {children} </RowMasonryPrimitive.RowMasonry> ) ); RowMasonry.displayName = 'RowMasonry'; export const RowMasonryItem = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>( ({ className, children, ...props }, ref) => ( <RowMasonryPrimitive.RowMasonryItem ref={ref} className={clsx('w-full', className)} {...props} > {children} </RowMasonryPrimitive.RowMasonryItem> ) ); RowMasonryItem.displayName = 'RowMasonryItem';