गैलरी
Photo Grid Gallery
An even, responsive grid of captioned photos with no JavaScript.
#gallery#grid#images
6 फ्रेमवर्कशुरुआती
Loading…
A Pinterest-style wall of varying-height photos, built on CSS columns.
<!--
Masonry with CSS columns and no JavaScript - but read the trade-off before
you reach for it.
Columns flow top-to-bottom, THEN across: items 1-2 fill the first column,
3-4 the second. So the DOM order (which is the screen-reader and tab order)
runs down each column, while a sighted eye scans across rows. For a photo
wall where order carries no meaning that is free; for anything ranked -
search results, a feed - it is wrong, and an even grid is the honest answer.
-->
<ul class="masonry">
<li class="masonry__item">
<figure class="masonry__figure">
<img class="masonry__image" src="/images/photo-1.jpg" alt="Fishing boats moored under an orange sky" width="800" height="600" loading="lazy" />
<figcaption class="masonry__caption">Harbour at dawn</figcaption>
</figure>
</li>
<li class="masonry__item">
<figure class="masonry__figure">
<img class="masonry__image" src="/images/photo-2.jpg" alt="A footpath switching back through pine forest" width="800" height="1100" loading="lazy" />
<figcaption class="masonry__caption">Ridge trail</figcaption>
</figure>
</li>
<li class="masonry__item">
<figure class="masonry__figure">
<img class="masonry__image" src="/images/photo-3.jpg" alt="Concrete stairwell seen from directly below" width="800" height="800" loading="lazy" />
<figcaption class="masonry__caption">Stairwell study</figcaption>
</figure>
</li>
<li class="masonry__item">
<figure class="masonry__figure">
<img class="masonry__image" src="/images/photo-4.jpg" alt="Long exposure of traffic crossing a bridge at night" width="800" height="500" loading="lazy" />
<figcaption class="masonry__caption">Night crossing</figcaption>
</figure>
</li>
<li class="masonry__item">
<figure class="masonry__figure">
<img class="masonry__image" src="/images/photo-5.jpg" alt="Salt flats meeting a pale horizon" width="800" height="1000" loading="lazy" />
<figcaption class="masonry__caption">Salt flats</figcaption>
</figure>
</li>
<li class="masonry__item">
<figure class="masonry__figure">
<img class="masonry__image" src="/images/photo-6.jpg" alt="Market awnings in bright primary colours" width="800" height="700" loading="lazy" />
<figcaption class="masonry__caption">Market row</figcaption>
</figure>
</li>
</ul>| Prop | टाइप | डिफ़ॉल्ट | विवरण |
|---|---|---|---|
itemsआवश्यक | GalleryPhoto[] | - | रेंडर की जाने वाली आइटम की सूची। |
className | string | - | रूट एलिमेंट पर मर्ज होने वाली अतिरिक्त क्लासेज़। |
Read the trade-off before reaching for this. CSS columns flow top-to-bottom and *then* across, so items 1-2 fill the first column and 3-4 the second: the DOM order - which is also the tab and screen-reader order - runs down each column while a sighted eye scans across rows. For a photo wall where sequence carries no meaning that costs nothing, and you get a real masonry for two declarations with no JavaScript, no measuring and no reflow on resize. For anything *ranked* - search results, a chronological feed - it is simply wrong, and the even grid is the honest answer. `break-inside: avoid` is not optional; without it a tile splits across the column boundary, half at the bottom of one and half at the top of the next. Carry intrinsic `width`/`height` if you can: the columns cannot balance until every height is known, so without them the wall visibly reshuffles as the files land.