गैलरी
Masonry Gallery
A Pinterest-style wall of varying-height photos, built on CSS columns.
#gallery#masonry#columns
6 फ्रेमवर्कमध्यम
Loading…
An even, responsive grid of captioned photos with no JavaScript.
<!--
A gallery is a list, so it is marked up as one. A screen reader announces
"list, 6 items" before the first tile - the fact a user needs in order to
decide whether to walk it at all. A stack of divs announces nothing.
alt and figcaption are NOT the same string. The caption is the visible title;
the alt describes what the photo actually shows, for someone who cannot see
it. Writing the title into both makes the caption redundant noise and leaves
the image undescribed.
-->
<ul class="photo-grid">
<li>
<figure class="photo-grid__figure">
<img class="photo-grid__image" src="/images/photo-1.jpg" alt="Fishing boats moored under an orange sky" width="800" height="600" loading="lazy" />
<figcaption class="photo-grid__caption">Harbour at dawn</figcaption>
</figure>
</li>
<li>
<figure class="photo-grid__figure">
<img class="photo-grid__image" src="/images/photo-2.jpg" alt="A footpath switching back through pine forest" width="800" height="600" loading="lazy" />
<figcaption class="photo-grid__caption">Ridge trail</figcaption>
</figure>
</li>
<li>
<figure class="photo-grid__figure">
<img class="photo-grid__image" src="/images/photo-3.jpg" alt="Concrete stairwell seen from directly below" width="800" height="600" loading="lazy" />
<figcaption class="photo-grid__caption">Stairwell study</figcaption>
</figure>
</li>
<li>
<figure class="photo-grid__figure">
<img class="photo-grid__image" src="/images/photo-4.jpg" alt="Long exposure of traffic crossing a bridge at night" width="800" height="600" loading="lazy" />
<figcaption class="photo-grid__caption">Night crossing</figcaption>
</figure>
</li>
<li>
<figure class="photo-grid__figure">
<img class="photo-grid__image" src="/images/photo-5.jpg" alt="Salt flats meeting a pale horizon" width="800" height="600" loading="lazy" />
<figcaption class="photo-grid__caption">Salt flats</figcaption>
</figure>
</li>
<li>
<figure class="photo-grid__figure">
<img class="photo-grid__image" src="/images/photo-6.jpg" alt="Market awnings in bright primary colours" width="800" height="600" loading="lazy" />
<figcaption class="photo-grid__caption">Market row</figcaption>
</figure>
</li>
</ul>| Prop | टाइप | डिफ़ॉल्ट | विवरण |
|---|---|---|---|
itemsआवश्यक | GalleryPhoto[] | - | रेंडर की जाने वाली आइटम की सूची। |
className | string | - | रूट एलिमेंट पर मर्ज होने वाली अतिरिक्त क्लासेज़। |
Two details do most of the work. The columns come from `auto-fill` + `minmax(10rem, 1fr)` rather than a count, so the grid reflows to its *container* - drop it in a sidebar and it thins to two columns without a breakpoint being involved. And `aspect-ratio: 4/3` with `object-fit: cover` is what keeps the rows aligned when the source photos are not all the same shape; the alternative is a grid that stair-steps. The part worth resisting is writing the caption into the `alt` as well: the caption is the visible title, the alt describes what the photo actually *shows*, and collapsing the two leaves a blind user with the title read twice and the image undescribed. Both the HTML and Next.js tabs render on the server and ship no JavaScript at all.