FeaturedNew
ImagesCaptioned Figure
An image and its caption tied together with figure and figcaption, in a rounded frame.
#image#figure#caption
2 frameworksBeginner
Loading…
A Pinterest-style masonry wall built from CSS columns, with no JavaScript for the layout.
<!-- CSS columns give a masonry wall with zero JavaScript. break-inside-avoid
keeps a photo from splitting across a column, and the varied natural
heights do the staggering for free. -->
<div class="columns-2 gap-3 [column-fill:_balance] sm:columns-3">
<!-- Repeat per image. -->
<figure class="mb-3 break-inside-avoid overflow-hidden rounded-lg bg-gray-100 dark:bg-gray-800">
<img src="/images/photo-2.jpg" alt="Neon signs reflected in a rain-soaked street" loading="lazy" class="w-full object-cover" />
</figure>
</div>| Prop | Type | Default | Description |
|---|---|---|---|
imagesrequired | MasonryImage[] | - | The array of items to render. |
className | string | - | Additional classes merged onto the root element. |
CSS `columns-2 sm:columns-3` plus `break-inside-avoid` gives a staggered wall with zero layout script - the photos keep their natural heights and flow into the shortest column. Reading order follows the source top-to-bottom per column; if strict left-to-right order matters, a grid is the better tool. Each figure keeps a neutral background so a slow image never flashes empty.