图库
Photo Grid Gallery
An even, responsive grid of captioned photos with no JavaScript.
#gallery#grid#images
6 个框架初级
Loading…
A single scroll-snap row of gradient tiles that pans sideways instead of wrapping.
<!--
A single row that scrolls sideways instead of wrapping. overflow-x-auto keeps
the overflow INSIDE the list, so the page itself never scrolls horizontally -
the failure a fixed-width row causes at 320px. Media are CSS gradient tiles
(role="img" + aria-label) so the component needs no image host.
-->
<ul class="flex w-full snap-x snap-mandatory list-none gap-3 overflow-x-auto p-0 pb-2">
<li class="w-40 shrink-0 snap-start sm:w-56">
<figure class="m-0">
<div class="aspect-[4/3] w-full rounded-xl bg-gradient-to-br from-sky-400 to-indigo-600" role="img" aria-label="Sky-blue to indigo gradient"></div>
<figcaption class="pt-2 text-[0.8125rem] leading-snug text-gray-700 dark:text-gray-300">Coastline</figcaption>
</figure>
</li>
<li class="w-40 shrink-0 snap-start sm:w-56">
<figure class="m-0">
<div class="aspect-[4/3] w-full rounded-xl bg-gradient-to-br from-rose-400 to-orange-500" role="img" aria-label="Rose to orange gradient"></div>
<figcaption class="pt-2 text-[0.8125rem] leading-snug text-gray-700 dark:text-gray-300">Canyon</figcaption>
</figure>
</li>
<li class="w-40 shrink-0 snap-start sm:w-56">
<figure class="m-0">
<div class="aspect-[4/3] w-full rounded-xl bg-gradient-to-br from-emerald-400 to-teal-600" role="img" aria-label="Emerald to teal gradient"></div>
<figcaption class="pt-2 text-[0.8125rem] leading-snug text-gray-700 dark:text-gray-300">Forest</figcaption>
</figure>
</li>
<li class="w-40 shrink-0 snap-start sm:w-56">
<figure class="m-0">
<div class="aspect-[4/3] w-full rounded-xl bg-gradient-to-br from-violet-400 to-fuchsia-600" role="img" aria-label="Violet to fuchsia gradient"></div>
<figcaption class="pt-2 text-[0.8125rem] leading-snug text-gray-700 dark:text-gray-300">Dusk</figcaption>
</figure>
</li>
</ul>| Prop | 类型 | 默认值 | 说明 |
|---|---|---|---|
items必填 | GalleryTile[] | - | 要渲染的项目数组。 |
className | string | - | 合并到根元素上的额外类名。 |
The whole point is `overflow-x-auto` on the list: the overflow lives inside the row, so the page never scrolls sideways - the exact failure a fixed-width row causes at 320px. Swap the per-tile `w-40 sm:w-56` to trade how many tiles peek in at once, and each tile is a CSS gradient (`role="img"` + `aria-label`) so nothing hits an image host.