Masonry — ARC UI

Components

Masonry

layout

static

<arc-masonry>

Overview

Guidelines

When to use

Use for image galleries with varying aspect ratios
Use for card feeds where content height varies (blog posts, testimonials, products)
Set columns to match the expected viewport width — 2 for narrow, 3-4 for wide
Combine with Responsive Switcher to reduce columns on smaller screens
Use gap="md" for most card-based layouts; gap="sm" for dense image grids

When not to use

Do not use Masonry for uniform-height content — use a regular CSS grid or Aspect Grid instead
Do not set very high column counts (>5) as it creates unreadably narrow columns
Do not expect left-to-right reading order — masonry flows top-to-bottom per column
Do not nest Masonry inside Masonry
Do not use for layouts that require precise item ordering — column flow is determined by height

Features

Pure CSS columns layout — zero JavaScript for masonry positioning
Configurable column count via the `columns` prop
Design-token-based gap spacing (sm, md, lg) for consistent rhythm
Vertical-pack flow fills shortest columns first for tight packing
Break-inside: avoid ensures children are never split across columns
Lightweight wrapper with no resize observers or layout calculations
CSS part: `grid` for targeted ::part() styling

Preview

Item 1

Item 2

Item 3

Item 4

Item 5

Item 6

Usage

<arc-masonry columns="3" gap="md">
  <arc-card>Short content</arc-card>
  <arc-card>Taller content with more text that wraps to multiple lines</arc-card>
  <arc-card>Medium content</arc-card>
  <arc-card>Another short card</arc-card>
  <arc-card>Variable height content for masonry layout</arc-card>
  <arc-card>Brief</arc-card>
</arc-masonry>

import { Masonry, Card } from '@arclux/arc-ui-react';

function ImageGallery() {
  return (
    <Masonry columns={3} gap="md">
      <Card>Short content</Card>
      <Card>Taller content with more text</Card>
      <Card>Medium content</Card>
      <Card>Another short card</Card>
    </Masonry>
  );
}

<script setup>
import { Masonry, Card } from '@arclux/arc-ui-vue';
</script>

<template>
  <Masonry :columns="3" gap="md">
    <Card>Short content</Card>
    <Card>Taller content with more text</Card>
    <Card>Medium content</Card>
    <Card>Another short card</Card>
  </Masonry>
</template>

<script>
  import { Masonry, Card } from '@arclux/arc-ui-svelte';
</script>

<Masonry columns={3} gap="md">
  <Card>Short content</Card>
  <Card>Taller content with more text</Card>
  <Card>Medium content</Card>
  <Card>Another short card</Card>
</Masonry>

import { Component } from '@angular/core';
import { Masonry, Card } from '@arclux/arc-ui-angular';

@Component({
  imports: [Masonry, Card],
  template: `
    <Masonry [columns]="3" gap="md">
      <Card>Short content</Card>
      <Card>Taller content with more text</Card>
      <Card>Medium content</Card>
      <Card>Another short card</Card>
    </Masonry>
  `,
})
export class GalleryComponent {}

import { Masonry, Card } from '@arclux/arc-ui-solid';

function ImageGallery() {
  return (
    <Masonry columns={3} gap="md">
      <Card>Short content</Card>
      <Card>Taller content with more text</Card>
      <Card>Medium content</Card>
      <Card>Another short card</Card>
    </Masonry>
  );
}

import { Masonry, Card } from '@arclux/arc-ui-preact';

function ImageGallery() {
  return (
    <Masonry columns={3} gap="md">
      <Card>Short content</Card>
      <Card>Taller content with more text</Card>
      <Card>Medium content</Card>
      <Card>Another short card</Card>
    </Masonry>
  );
}

<!-- See HTML tab after running pnpm generate -->
<div class="arc-masonry">...</div>

<!-- See HTML (Inline) tab after running pnpm generate -->
<div class="arc-masonry" style="column-count:3;column-gap:var(--space-md)">...</div>

API

Prop	Type	Default	Description
`columns`	`number`	`3`	Number of columns in the masonry grid. The browser distributes children across columns to minimize overall height difference.
`gap`	`'sm' \| 'md' \| 'lg'`	`'md'`	Spacing between columns and rows, mapped to design system spacing tokens (--space-sm, --space-md, --space-lg).

Overview

Guidelines

When to use

When not to use

Features

Preview

Usage

API

See Also

ARC UI

Arclight