New
Grids & BentosFeature Bento 3x2
Asymmetric feature tiles where a hero cell spans two columns and two rows and the rest pack around it.
#bento#features#grid
3 frameworksIntermediate
Loading…
A photo-collage bento built from CSS gradient panels, so there is no external image to preload.
<!-- Gradient panels stand in for photos, so there is no external image. Each is a
<figure> with a real <figcaption> rather than alt text on a fake <img>. -->
<section class="mx-auto grid w-full max-w-5xl grid-cols-1 gap-3 p-4 sm:grid-cols-4 sm:p-6">
<figure class="overflow-hidden rounded-2xl sm:col-span-2 sm:row-span-2">
<div class="min-h-48 w-full bg-gradient-to-br from-rose-400 via-orange-300 to-amber-200" aria-hidden="true"></div>
<figcaption class="p-3 text-sm text-gray-600 dark:text-gray-400">Sunrise, Dolomites</figcaption>
</figure>
<figure class="overflow-hidden rounded-2xl">
<div class="min-h-28 w-full bg-gradient-to-br from-cyan-400 to-blue-500" aria-hidden="true"></div>
<figcaption class="p-3 text-sm text-gray-600 dark:text-gray-400">Coastline</figcaption>
</figure>
<figure class="overflow-hidden rounded-2xl">
<div class="min-h-28 w-full bg-gradient-to-br from-violet-500 to-fuchsia-500" aria-hidden="true"></div>
<figcaption class="p-3 text-sm text-gray-600 dark:text-gray-400">Night market</figcaption>
</figure>
<figure class="overflow-hidden rounded-2xl sm:col-span-2">
<div class="min-h-28 w-full bg-gradient-to-r from-emerald-400 to-teal-500" aria-hidden="true"></div>
<figcaption class="p-3 text-sm text-gray-600 dark:text-gray-400">Rice terraces</figcaption>
</figure>
</section>| Prop | Type | Default | Description |
|---|---|---|---|
items | CollageItem[] | - | The array of items to render. |
className | string | - | Additional classes merged onto the root element. |
Each item is a real `<figure>` with a `<figcaption>` rather than alt text on a fake `<img>`; swap the gradient panels for `<img>` once you have assets. The hero cell spans two columns and two rows on `sm:` up and collapses to a single column on phones.