注目新着
画像Captioned Figure
An image and its caption tied together with figure and figcaption, in a rounded frame.
#image#figure#caption
2 個のフレームワーク初級
Loading…
An even, responsive grid of square thumbnails that steps from two up to four across.
<ul class="grid w-full grid-cols-2 gap-2 sm:grid-cols-3 sm:gap-3">
<!-- Repeat per image. Each aspect-square box reserves its slot so nothing
reflows as photos decode. -->
<li>
<a href="#" class="block aspect-square overflow-hidden rounded-lg bg-gray-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-600 focus-visible:ring-offset-2 dark:bg-gray-800 dark:focus-visible:ring-offset-gray-950">
<img src="/images/photo-1.jpg" alt="Harbour at golden hour" loading="lazy" class="h-full w-full object-cover transition-transform duration-300 hover:scale-105 motion-reduce:transform-none" />
</a>
</li>
</ul>| Prop | 型 | デフォルト | 説明 |
|---|---|---|---|
images必須 | GalleryImage[] | - | レンダリングする項目の配列。 |
columns | number | 3 | 比較対象の列（表示順）。 |
className | string | - | ルート要素にマージされる追加クラス。 |
Every cell is an `aspect-square` box, so the grid stays perfectly even and reserves its slots before any photo decodes - the fix for layout shift. The column count is a prop mapped to a static class (Tailwind cannot see an interpolated `grid-cols-${n}`), so pass 2, 3 or 4. Each thumbnail is a focusable link with a visible ring.