Layout

Masonry

Column-flow masonry. Uses CSS columns today and upgrades itself to native grid masonry via @supports where the browser has it.

plain markup — no library on the page

rendered by aura-react

rendered by aura-vue

rendered by aura-svelte

built from aura-angular's own class helpers

90px

140px

70px

120px

100px

60px

90px

140px

70px

120px

100px

60px

90px

140px

70px

120px

100px

60px

90px

140px

70px

120px

100px

60px

90px

140px

70px

120px

100px

60px

Code

index.html

<div class="aura-masonry" style="--aura-gap:var(--space-4);--cols-base:2;--cols-md:3;width:100%;">
  <div class="aura-card" style="height:90px;margin-bottom:var(--space-4);">
    <span class="aura-text aura-text--caption aura-text--muted" style="">90px</span>
  </div>
  <div class="aura-card" style="height:140px;margin-bottom:var(--space-4);">
    <span class="aura-text aura-text--caption aura-text--muted" style="">140px</span>
  </div>
  <div class="aura-card" style="height:70px;margin-bottom:var(--space-4);">
    <span class="aura-text aura-text--caption aura-text--muted" style="">70px</span>
  </div>
  <div class="aura-card" style="height:120px;margin-bottom:var(--space-4);">
    <span class="aura-text aura-text--caption aura-text--muted" style="">120px</span>
  </div>
  <div class="aura-card" style="height:100px;margin-bottom:var(--space-4);">
    <span class="aura-text aura-text--caption aura-text--muted" style="">100px</span>
  </div>
  <div class="aura-card" style="height:60px;margin-bottom:var(--space-4);">
    <span class="aura-text aura-text--caption aura-text--muted" style="">60px</span>
  </div>
</div>

Demo.tsx

import { Card, Masonry, Typography } from '@ilomee/aura-react';

const HEIGHTS = [90, 140, 70, 120, 100, 60];

export default function Demo() {
  return (
    <Masonry cols={{ base: 2, md: 3 }} style={{ width: '100%' }}>
      {HEIGHTS.map((height, i) => (
        <Card key={i} style={{ height, marginBottom: 'var(--space-4)' }}>
          <Typography variant="caption" tone="muted">
            {height}px
          </Typography>
        </Card>
      ))}
    </Masonry>
  );
}

Demo.vue

<script setup lang="ts">
import { Masonry, Card } from '@ilomee/aura-vue';
</script>

<template>
  <Masonry :cols="{ base: 1, md: 2, lg: 3 }">
    <Card v-for="note in notes" :key="note.id">{{ note.body }}</Card>
  </Masonry>
</template>

Demo.svelte

<script lang="ts">
  import { Masonry, Card } from '@ilomee/aura-svelte';
</script>

<Masonry cols={{ base: 1, md: 2, lg: 3 }}>
  {#each notes as note (note.id)}
    <Card>{note.body}</Card>
  {/each}
</Masonry>

Used as [auraMasonry] — a directive you put on your own element.

demo.component.ts

import { AuraMasonry, AuraCard } from '@ilomee/aura-angular';

@Component({
  standalone: true,
  imports: [AuraMasonry, AuraCard],
  template: `
    <div auraMasonry [cols]="{ base: 1, md: 2, lg: 3 }">
      @for (note of notes; track note.id) {
        <div auraCard>{{ note.body }}</div>
      }
    </div>
  `,
})
export class DemoComponent {
  notes = [];
}

A directive — you choose the element, so there is no as input.

Props

Plain markup has no props — the classes below are the whole API. The four packages do nothing more than set these same classes for you.

Name	Type	Default	Notes
as	`ElementType`	`'div'`	Rendered element.
cols	`number \| { base?: number; md?: number; lg?: number }`	`3`
gap	`number \| string`	`4`	Space-scale step (`4` → `var(--space-4)`) or a raw CSS length.

Name	Type	Default	Notes
as	`string`	`'div'`	Rendered element.
cols	`number \| { base?: number; md?: number; lg?: number }`	`3`
gap	`number \| string`	`4`	Space-scale step (`4` → `var(--space-4)`) or a raw CSS length.

Name	Type	Default	Notes
as	`string`	`'div'`	Rendered element.
cols	`number \| { base?: number; md?: number; lg?: number }`	`3`
gap	`number \| string`	`4`	Space-scale step (`4` → `var(--space-4)`) or a raw CSS length.

Name	Type	Default	Notes
cols	`number \| { base?: number; md?: number; lg?: number }`	`3`
gap	`number \| string`	`4`	Space-scale step (`4` → `var(--space-4)`) or a raw CSS length.

Emitted classes

Every framework emits the same classes — that is what makes the four libraries look identical. You can use them directly, without any component library.

Class	Role	Notes
.aura-masonry	base	Required. A modifier does nothing without it.

Tokens and rules

components.css

gap: var(--aura-gap)
fallback: column-count
modern: grid-template-rows: masonry, где поддерживается