फ़ीचर्डनया
इमेज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.