Masonry

#Example

<div class="masonry masonry-3"><div class="h-32 rounded-lg bg-primary"></div><div class="h-48 rounded-lg bg-accent"></div><div class="h-24 rounded-lg bg-info"></div><div class="h-40 rounded-lg bg-success"></div><div class="h-28 rounded-lg bg-warning"></div><div class="h-36 rounded-lg bg-danger"></div></div>

#Classes

4 classes. Click a name to copy it. Utilities on the same element always win over component defaults, so any of them can be adjusted with plain utility classes.

.masonry {
  columns: 16rem;
  column-gap: 1rem;
}

.masonry > * {
  margin-bottom: 1rem;
  break-inside: avoid;
}

.masonry-2 {
  columns: 2;
}

.masonry-3 {
  columns: 3;
}

.masonry-4 {
  columns: 4;
}

#Usage

Components ship inside the same stylesheet as the utilities. There is nothing else to install and no script to load: link Monsoon and write the markup.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/monsooncss">

<!-- Masonry: start from the base class, then add modifiers -->
<div class="masonry masonry-3"><div class="h-32 rounded-lg bg-primary"></div><div class="h-48 rounded-lg bg-accent"></div><div class="h-24 rounded-lg bg-info"></div><div class="h-40 rounded-lg bg-success"></div><div class="h-28 rounded-lg bg-warning"></div><div class="h-36 rounded-lg bg-danger"></div></div>

#Accessibility

• Every interactive part shows a visible focus ring with :focus-visible, and tone colors pair with -foreground tokens that keep text at 4.5:1 or better in light and dark mode.

#Related components