Open demo

CSS code

HTML 
<div><span class="lbl">Column masonry</span>
<section class="ms" aria-labelledby="ms-title">
  <div class="gh"><div><p class="gh-kicker">Field Notes</p><h2 id="ms-title">Forest and coast</h2></div><p class="gh-meta">12 photographs · Tomas Brandt</p></div>
  <ul class="ms-cols" role="list">
    <li><figure><img src="https://images.unsplash.com/photo-1513836279014-a89f7a76ae86?auto=format&fit=crop&w=600&h=900&q=70" width="600" height="900" loading="lazy" alt="Looking straight up a ring of tall redwood trunks to a small patch of sky"><figcaption>Redwood ring</figcaption></figure></li>
    <li><figure><img src="https://images.unsplash.com/photo-1497436072909-60f360e1d4b1?auto=format&fit=crop&w=600&h=400&q=70" width="600" height="400" loading="lazy" alt="Aerial view of dense green forest meeting a bright turquoise lake along a straight edge"><figcaption>Where the forest stops</figcaption></figure></li>
    <li><figure><img src="https://images.unsplash.com/photo-1505144808419-1957a94ca61e?auto=format&fit=crop&w=600&h=900&q=70" width="600" height="900" loading="lazy" alt="Aerial view of a white wave breaking along a narrow strip of sand"><figcaption>Shore break from above</figcaption></figure></li>
    <li><figure><img src="https://images.unsplash.com/photo-1418065460487-3e41a6c84dc5?auto=format&fit=crop&w=600&h=400&q=70" width="600" height="400" loading="lazy" alt="Rows of dark pine trees disappearing into thick white mist"><figcaption>Morning fog</figcaption></figure></li>
    <li><figure><img src="https://images.unsplash.com/photo-1505118380757-91f5f5632de0?auto=format&fit=crop&w=600&h=960&q=70" width="600" height="960" loading="lazy" alt="Aerial view of turquoise water and white surf along a pale sandy beach"><figcaption>Low tide</figcaption></figure></li>
    <li><figure><img src="https://images.unsplash.com/photo-1502082553048-f009c37129b9?auto=format&fit=crop&w=600&h=450&q=70" width="600" height="450" loading="lazy" alt="A single broad oak tree standing in green grass under a pale blue sky"><figcaption>The old oak</figcaption></figure></li>
    <li><figure><img src="https://images.unsplash.com/photo-1441974231531-c6227db76b6e?auto=format&fit=crop&w=600&h=750&q=70" width="600" height="750" loading="lazy" alt="Sunlight falling across a path through a tall pine forest"><figcaption>Path at noon</figcaption></figure></li>
    <li><figure><img src="https://images.unsplash.com/photo-1447752875215-b2761acb3c5d?auto=format&fit=crop&w=600&h=450&q=70" width="600" height="450" loading="lazy" alt="A wooden footbridge with metal railings leading into a dense green forest"><figcaption>The footbridge</figcaption></figure></li>
    <li><figure><img src="https://images.unsplash.com/photo-1511884642898-4c92249e20b6?auto=format&fit=crop&w=600&h=800&q=70" width="600" height="800" loading="lazy" alt="A river running through a misty pine forest in a steep valley"><figcaption>Valley river</figcaption></figure></li>
    <li><figure><img src="https://images.unsplash.com/photo-1518837695005-2083093ee35b?auto=format&fit=crop&w=600&h=400&q=70" width="600" height="400" loading="lazy" alt="A close, low view of dark blue sea swell under a pale sky"><figcaption>Swell</figcaption></figure></li>
    <li><figure><img src="https://images.unsplash.com/photo-1482192596544-9eb780fc7f66?auto=format&fit=crop&w=600&h=600&q=70" width="600" height="600" loading="lazy" alt="Mist drifting over a pine forest seen from above, with a few trees turning orange"><figcaption>Autumn mist</figcaption></figure></li>
    <li><figure><img src="https://images.unsplash.com/photo-1439405326854-014607f694d7?auto=format&fit=crop&w=600&h=400&q=70" width="600" height="400" loading="lazy" alt="Green sea waves under a cloudy sky with the sun setting on the horizon"><figcaption>Last light at sea</figcaption></figure></li>
  </ul>
</section></div>

<div><span class="lbl">Grid masonry with wide and tall tiles</span>
<section class="mg" aria-labelledby="mg-title">
  <div class="gh"><div><p class="gh-kicker">Kitchen Diaries</p><h2 id="mg-title">Spring menu shoot</h2></div><p class="gh-meta">12 photographs · Inès Garnier</p></div>
  <ul class="mg-grid" role="list">
    <li class="mg-wide"><figure><img src="https://images.unsplash.com/photo-1504674900247-0877df9cc836?auto=format&fit=crop&w=900&h=600&q=70" width="900" height="600" loading="lazy" alt="Three plates of grilled meat, salad and fish on a wooden table, scattered with chillies, herbs and cashews"><figcaption>Sunday table</figcaption></figure></li>
    <li class="mg-tall"><figure><img src="https://images.unsplash.com/photo-1540189549336-e6e99c3679fe?auto=format&fit=crop&w=500&h=760&q=70" width="500" height="760" loading="lazy" alt="A dark plate of shredded salad beside a glass of orange juice and halved oranges"><figcaption>Citrus slaw</figcaption></figure></li>
    <li><figure><img src="https://images.unsplash.com/photo-1546069901-ba9599a7e63c?auto=format&fit=crop&w=500&h=500&q=70" width="500" height="500" loading="lazy" alt="A bowl of salmon, egg, sweetcorn, tomato and red cabbage on a white table"><figcaption>Salmon bowl</figcaption></figure></li>
    <li><figure><img src="https://images.unsplash.com/photo-1565299624946-b28f40a0ae38?auto=format&fit=crop&w=500&h=500&q=70" width="500" height="500" loading="lazy" alt="A sliced pizza topped with chicken, red onion and herbs on a wooden board"><figcaption>Flatbread</figcaption></figure></li>
    <li><figure><img src="https://images.unsplash.com/photo-1473093295043-cdd812d0e601?auto=format&fit=crop&w=500&h=500&q=70" width="500" height="500" loading="lazy" alt="Bow-tie pasta with pesto, cherry tomatoes and rocket in a white bowl"><figcaption>Farfalle al pesto</figcaption></figure></li>
    <li class="mg-tall"><figure><img src="https://images.unsplash.com/photo-1555939594-58d7cb561ad1?auto=format&fit=crop&w=500&h=760&q=70" width="500" height="760" loading="lazy" alt="Grilled meat and vegetable skewers on paper with small bowls of sauce, seen from above"><figcaption>Skewers</figcaption></figure></li>
    <li class="mg-tall"><figure><img src="https://images.unsplash.com/photo-1567620905732-2d1ec7ab7445?auto=format&fit=crop&w=500&h=760&q=70" width="500" height="760" loading="lazy" alt="Syrup being poured over a tall stack of pancakes topped with butter and a sprig of herbs"><figcaption>Pancake stack</figcaption></figure></li>
    <li><figure><img src="https://images.unsplash.com/photo-1484723091739-30a097e8f929?auto=format&fit=crop&w=500&h=500&q=70" width="500" height="500" loading="lazy" alt="French toast with banana slices and blueberries on a dark plate"><figcaption>French toast</figcaption></figure></li>
    <li><figure><img src="https://images.unsplash.com/photo-1488477181946-6428a0291777?auto=format&fit=crop&w=500&h=500&q=70" width="500" height="500" loading="lazy" alt="Small glass jars of a creamy dessert topped with strawberries on a white table"><figcaption>Strawberry pots</figcaption></figure></li>
    <li class="mg-tall"><figure><img src="https://images.unsplash.com/photo-1482049016688-2d3e1b311543?auto=format&fit=crop&w=500&h=760&q=70" width="500" height="760" loading="lazy" alt="Toast topped with salad leaves and halved boiled eggs on a dark plate"><figcaption>Egg toast</figcaption></figure></li>
    <li class="mg-wide"><figure><img src="https://images.unsplash.com/photo-1512621776951-a57141f2eefd?auto=format&fit=crop&w=900&h=600&q=70" width="900" height="600" loading="lazy" alt="A bowl of avocado, chickpeas, tomatoes, roast sweet potato and greens on a wooden table"><figcaption>Market bowl</figcaption></figure></li>
    <li><figure><img src="https://images.unsplash.com/photo-1490645935967-10de6ba17061?auto=format&fit=crop&w=500&h=500&q=70" width="500" height="500" loading="lazy" alt="A blue plate of courgette noodles, boiled eggs, greens and avocado on a rustic table with white blossom"><figcaption>Spring plate</figcaption></figure></li>
  </ul>
</section></div>
CSS 
/* Masonry galleries. Shared header */
.gh{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:6px 24px;margin-bottom:20px}
.gh-kicker{font-size:.75rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#1d6a5b}
.gh h2{margin-top:4px;font-size:1.75rem;line-height:1.15;letter-spacing:-.02em}
.gh-meta{font-size:.9rem;color:#52615c}

/* 1. Column masonry: CSS multi-column layout keeps each photo at its own height */
.ms{--ms-cols:3;--ms-gap:16px}
.ms-cols{list-style:none;columns:var(--ms-cols);column-gap:var(--ms-gap)}
.ms-cols li{break-inside:avoid;margin-bottom:var(--ms-gap)}
.ms-cols img{width:100%;height:auto;display:block;border-radius:10px;background:#d3dbd8}
.ms-cols figcaption{margin-top:8px;font-size:.82rem;color:#52615c}
@media (max-width:767px){.ms{--ms-cols:2;--ms-gap:12px}}

/* 2. Grid masonry: rows of a fixed height, tiles span 2 or 3 rows, dense packing fills the holes */
.mg{--mg-row:110px;--mg-gap:14px}
.mg-grid{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:var(--mg-row);grid-auto-flow:dense;gap:var(--mg-gap)}
.mg-grid li{grid-row:span 2;min-width:0}
.mg-grid .mg-tall{grid-row:span 3}
.mg-grid .mg-wide{grid-column:span 2;grid-row:span 3}
.mg-grid figure{position:relative;height:100%;border-radius:14px;overflow:hidden;background:#d3dbd8}
.mg-grid img{width:100%;height:100%;object-fit:cover;display:block}
.mg-grid figcaption{position:absolute;left:10px;bottom:10px;padding:5px 11px;border-radius:999px;background:rgba(10,22,18,.8);color:#fff;font-size:.78rem;font-weight:600}
@media (max-width:767px){.mg{--mg-row:84px;--mg-gap:10px}.mg-grid{grid-template-columns:repeat(2,1fr)}}

Bootstrap 5 code

Requires: Bootstrap 5.3.8 CSS

HTML 
<div><span class="lbl">Column masonry</span>
<section class="ms" aria-labelledby="ms-title">
  <div class="gh d-flex flex-wrap align-items-end justify-content-between"><div><p class="gh-kicker">Field Notes</p><h2 id="ms-title" class="gh-title">Forest and coast</h2></div><p class="gh-meta">12 photographs · Tomas Brandt</p></div>
  <ul class="ms-cols list-unstyled m-0">
    <li><figure class="figure m-0 d-block"><img src="https://images.unsplash.com/photo-1513836279014-a89f7a76ae86?auto=format&fit=crop&w=600&h=900&q=70" class="figure-img img-fluid d-block w-100" width="600" height="900" loading="lazy" alt="Looking straight up a ring of tall redwood trunks to a small patch of sky"><figcaption class="figure-caption">Redwood ring</figcaption></figure></li>
    <li><figure class="figure m-0 d-block"><img src="https://images.unsplash.com/photo-1497436072909-60f360e1d4b1?auto=format&fit=crop&w=600&h=400&q=70" class="figure-img img-fluid d-block w-100" width="600" height="400" loading="lazy" alt="Aerial view of dense green forest meeting a bright turquoise lake along a straight edge"><figcaption class="figure-caption">Where the forest stops</figcaption></figure></li>
    <li><figure class="figure m-0 d-block"><img src="https://images.unsplash.com/photo-1505144808419-1957a94ca61e?auto=format&fit=crop&w=600&h=900&q=70" class="figure-img img-fluid d-block w-100" width="600" height="900" loading="lazy" alt="Aerial view of a white wave breaking along a narrow strip of sand"><figcaption class="figure-caption">Shore break from above</figcaption></figure></li>
    <li><figure class="figure m-0 d-block"><img src="https://images.unsplash.com/photo-1418065460487-3e41a6c84dc5?auto=format&fit=crop&w=600&h=400&q=70" class="figure-img img-fluid d-block w-100" width="600" height="400" loading="lazy" alt="Rows of dark pine trees disappearing into thick white mist"><figcaption class="figure-caption">Morning fog</figcaption></figure></li>
    <li><figure class="figure m-0 d-block"><img src="https://images.unsplash.com/photo-1505118380757-91f5f5632de0?auto=format&fit=crop&w=600&h=960&q=70" class="figure-img img-fluid d-block w-100" width="600" height="960" loading="lazy" alt="Aerial view of turquoise water and white surf along a pale sandy beach"><figcaption class="figure-caption">Low tide</figcaption></figure></li>
    <li><figure class="figure m-0 d-block"><img src="https://images.unsplash.com/photo-1502082553048-f009c37129b9?auto=format&fit=crop&w=600&h=450&q=70" class="figure-img img-fluid d-block w-100" width="600" height="450" loading="lazy" alt="A single broad oak tree standing in green grass under a pale blue sky"><figcaption class="figure-caption">The old oak</figcaption></figure></li>
    <li><figure class="figure m-0 d-block"><img src="https://images.unsplash.com/photo-1441974231531-c6227db76b6e?auto=format&fit=crop&w=600&h=750&q=70" class="figure-img img-fluid d-block w-100" width="600" height="750" loading="lazy" alt="Sunlight falling across a path through a tall pine forest"><figcaption class="figure-caption">Path at noon</figcaption></figure></li>
    <li><figure class="figure m-0 d-block"><img src="https://images.unsplash.com/photo-1447752875215-b2761acb3c5d?auto=format&fit=crop&w=600&h=450&q=70" class="figure-img img-fluid d-block w-100" width="600" height="450" loading="lazy" alt="A wooden footbridge with metal railings leading into a dense green forest"><figcaption class="figure-caption">The footbridge</figcaption></figure></li>
    <li><figure class="figure m-0 d-block"><img src="https://images.unsplash.com/photo-1511884642898-4c92249e20b6?auto=format&fit=crop&w=600&h=800&q=70" class="figure-img img-fluid d-block w-100" width="600" height="800" loading="lazy" alt="A river running through a misty pine forest in a steep valley"><figcaption class="figure-caption">Valley river</figcaption></figure></li>
    <li><figure class="figure m-0 d-block"><img src="https://images.unsplash.com/photo-1518837695005-2083093ee35b?auto=format&fit=crop&w=600&h=400&q=70" class="figure-img img-fluid d-block w-100" width="600" height="400" loading="lazy" alt="A close, low view of dark blue sea swell under a pale sky"><figcaption class="figure-caption">Swell</figcaption></figure></li>
    <li><figure class="figure m-0 d-block"><img src="https://images.unsplash.com/photo-1482192596544-9eb780fc7f66?auto=format&fit=crop&w=600&h=600&q=70" class="figure-img img-fluid d-block w-100" width="600" height="600" loading="lazy" alt="Mist drifting over a pine forest seen from above, with a few trees turning orange"><figcaption class="figure-caption">Autumn mist</figcaption></figure></li>
    <li><figure class="figure m-0 d-block"><img src="https://images.unsplash.com/photo-1439405326854-014607f694d7?auto=format&fit=crop&w=600&h=400&q=70" class="figure-img img-fluid d-block w-100" width="600" height="400" loading="lazy" alt="Green sea waves under a cloudy sky with the sun setting on the horizon"><figcaption class="figure-caption">Last light at sea</figcaption></figure></li>
  </ul>
</section></div>

<div><span class="lbl">Grid masonry with wide and tall tiles</span>
<section class="mg" aria-labelledby="mg-title">
  <div class="gh d-flex flex-wrap align-items-end justify-content-between"><div><p class="gh-kicker">Kitchen Diaries</p><h2 id="mg-title" class="gh-title">Spring menu shoot</h2></div><p class="gh-meta">12 photographs · Inès Garnier</p></div>
  <ul class="mg-grid d-grid list-unstyled m-0">
    <li class="mg-wide"><figure class="position-relative h-100 m-0"><img src="https://images.unsplash.com/photo-1504674900247-0877df9cc836?auto=format&fit=crop&w=900&h=600&q=70" class="d-block w-100 h-100 object-fit-cover" width="900" height="600" loading="lazy" alt="Three plates of grilled meat, salad and fish on a wooden table, scattered with chillies, herbs and cashews"><figcaption class="badge rounded-pill">Sunday table</figcaption></figure></li>
    <li class="mg-tall"><figure class="position-relative h-100 m-0"><img src="https://images.unsplash.com/photo-1540189549336-e6e99c3679fe?auto=format&fit=crop&w=500&h=760&q=70" class="d-block w-100 h-100 object-fit-cover" width="500" height="760" loading="lazy" alt="A dark plate of shredded salad beside a glass of orange juice and halved oranges"><figcaption class="badge rounded-pill">Citrus slaw</figcaption></figure></li>
    <li><figure class="position-relative h-100 m-0"><img src="https://images.unsplash.com/photo-1546069901-ba9599a7e63c?auto=format&fit=crop&w=500&h=500&q=70" class="d-block w-100 h-100 object-fit-cover" width="500" height="500" loading="lazy" alt="A bowl of salmon, egg, sweetcorn, tomato and red cabbage on a white table"><figcaption class="badge rounded-pill">Salmon bowl</figcaption></figure></li>
    <li><figure class="position-relative h-100 m-0"><img src="https://images.unsplash.com/photo-1565299624946-b28f40a0ae38?auto=format&fit=crop&w=500&h=500&q=70" class="d-block w-100 h-100 object-fit-cover" width="500" height="500" loading="lazy" alt="A sliced pizza topped with chicken, red onion and herbs on a wooden board"><figcaption class="badge rounded-pill">Flatbread</figcaption></figure></li>
    <li><figure class="position-relative h-100 m-0"><img src="https://images.unsplash.com/photo-1473093295043-cdd812d0e601?auto=format&fit=crop&w=500&h=500&q=70" class="d-block w-100 h-100 object-fit-cover" width="500" height="500" loading="lazy" alt="Bow-tie pasta with pesto, cherry tomatoes and rocket in a white bowl"><figcaption class="badge rounded-pill">Farfalle al pesto</figcaption></figure></li>
    <li class="mg-tall"><figure class="position-relative h-100 m-0"><img src="https://images.unsplash.com/photo-1555939594-58d7cb561ad1?auto=format&fit=crop&w=500&h=760&q=70" class="d-block w-100 h-100 object-fit-cover" width="500" height="760" loading="lazy" alt="Grilled meat and vegetable skewers on paper with small bowls of sauce, seen from above"><figcaption class="badge rounded-pill">Skewers</figcaption></figure></li>
    <li class="mg-tall"><figure class="position-relative h-100 m-0"><img src="https://images.unsplash.com/photo-1567620905732-2d1ec7ab7445?auto=format&fit=crop&w=500&h=760&q=70" class="d-block w-100 h-100 object-fit-cover" width="500" height="760" loading="lazy" alt="Syrup being poured over a tall stack of pancakes topped with butter and a sprig of herbs"><figcaption class="badge rounded-pill">Pancake stack</figcaption></figure></li>
    <li><figure class="position-relative h-100 m-0"><img src="https://images.unsplash.com/photo-1484723091739-30a097e8f929?auto=format&fit=crop&w=500&h=500&q=70" class="d-block w-100 h-100 object-fit-cover" width="500" height="500" loading="lazy" alt="French toast with banana slices and blueberries on a dark plate"><figcaption class="badge rounded-pill">French toast</figcaption></figure></li>
    <li><figure class="position-relative h-100 m-0"><img src="https://images.unsplash.com/photo-1488477181946-6428a0291777?auto=format&fit=crop&w=500&h=500&q=70" class="d-block w-100 h-100 object-fit-cover" width="500" height="500" loading="lazy" alt="Small glass jars of a creamy dessert topped with strawberries on a white table"><figcaption class="badge rounded-pill">Strawberry pots</figcaption></figure></li>
    <li class="mg-tall"><figure class="position-relative h-100 m-0"><img src="https://images.unsplash.com/photo-1482049016688-2d3e1b311543?auto=format&fit=crop&w=500&h=760&q=70" class="d-block w-100 h-100 object-fit-cover" width="500" height="760" loading="lazy" alt="Toast topped with salad leaves and halved boiled eggs on a dark plate"><figcaption class="badge rounded-pill">Egg toast</figcaption></figure></li>
    <li class="mg-wide"><figure class="position-relative h-100 m-0"><img src="https://images.unsplash.com/photo-1512621776951-a57141f2eefd?auto=format&fit=crop&w=900&h=600&q=70" class="d-block w-100 h-100 object-fit-cover" width="900" height="600" loading="lazy" alt="A bowl of avocado, chickpeas, tomatoes, roast sweet potato and greens on a wooden table"><figcaption class="badge rounded-pill">Market bowl</figcaption></figure></li>
    <li><figure class="position-relative h-100 m-0"><img src="https://images.unsplash.com/photo-1490645935967-10de6ba17061?auto=format&fit=crop&w=500&h=500&q=70" class="d-block w-100 h-100 object-fit-cover" width="500" height="500" loading="lazy" alt="A blue plate of courgette noodles, boiled eggs, greens and avocado on a rustic table with white blossom"><figcaption class="badge rounded-pill">Spring plate</figcaption></figure></li>
  </ul>
</section></div>
CSS 
/* Masonry galleries with Bootstrap's .figure, .badge and utilities. Shared header */
.gh{gap:6px 24px;margin-bottom:20px}
.gh-kicker{margin:0;font-size:.75rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#1d6a5b}
.gh-title{margin:4px 0 0;font-size:1.75rem;font-weight:700;line-height:1.15;letter-spacing:-.02em}
.gh-meta{margin:0;font-size:.9rem;color:#52615c}

/* 1. Column masonry: Bootstrap 5 has no masonry layout, so CSS columns do it */
.ms{--ms-cols:3;--ms-gap:16px}
.ms-cols{columns:var(--ms-cols);column-gap:var(--ms-gap)}
.ms-cols li{break-inside:avoid;margin-bottom:var(--ms-gap)}
.ms .figure-img{margin:0;border-radius:10px;background:#d3dbd8}
.ms .figure-caption{margin-top:8px;font-size:.82rem;color:#52615c}
@media (max-width:767px){.ms{--ms-cols:2;--ms-gap:12px}}

/* 2. Grid masonry: tiles span 2 or 3 fixed-height rows, dense packing fills the holes */
.mg{--mg-row:110px;--mg-gap:14px}
.mg-grid{grid-template-columns:repeat(4,1fr);grid-auto-rows:var(--mg-row);grid-auto-flow:dense;gap:var(--mg-gap)}
.mg-grid li{grid-row:span 2;min-width:0}
.mg-grid .mg-tall{grid-row:span 3}
.mg-grid .mg-wide{grid-column:span 2;grid-row:span 3}
.mg-grid figure{border-radius:14px;overflow:hidden;background:#d3dbd8}
.mg-grid .badge{position:absolute;left:10px;bottom:10px;--bs-badge-padding-x:11px;--bs-badge-padding-y:5px;--bs-badge-font-size:.78rem;--bs-badge-font-weight:600;
  background:rgba(10,22,18,.8);white-space:normal;text-align:left}
@media (max-width:767px){.mg{--mg-row:84px;--mg-gap:10px}.mg-grid{grid-template-columns:repeat(2,1fr)}}

Tailwind 4 code

Requires: Tailwind CSS 4

HTML 
<div><span class="mb-4 block text-[.72rem] tracking-[.12em] text-[#52615c] uppercase">Column masonry</span>
<section aria-labelledby="ms-title">
  <div class="mb-5 flex flex-wrap items-end justify-between gap-x-6 gap-y-1.5"><div><p class="text-xs leading-[normal] font-bold tracking-[.14em] text-[#1d6a5b] uppercase">Field Notes</p><h2 id="ms-title" class="mt-1 text-[1.75rem] leading-[1.15] font-bold tracking-[-.02em]">Forest and coast</h2></div><p class="text-[.9rem] leading-[normal] text-[#52615c]">12 photographs · Tomas Brandt</p></div>
  <ul class="columns-2 gap-3 md:columns-3 md:gap-4" role="list">
    <li class="mb-3 break-inside-avoid md:mb-4"><figure><img src="https://images.unsplash.com/photo-1513836279014-a89f7a76ae86?auto=format&fit=crop&w=600&h=900&q=70" class="block h-auto w-full rounded-[10px] bg-[#d3dbd8]" width="600" height="900" loading="lazy" alt="Looking straight up a ring of tall redwood trunks to a small patch of sky"><figcaption class="mt-2 text-[.82rem] text-[#52615c]">Redwood ring</figcaption></figure></li>
    <li class="mb-3 break-inside-avoid md:mb-4"><figure><img src="https://images.unsplash.com/photo-1497436072909-60f360e1d4b1?auto=format&fit=crop&w=600&h=400&q=70" class="block h-auto w-full rounded-[10px] bg-[#d3dbd8]" width="600" height="400" loading="lazy" alt="Aerial view of dense green forest meeting a bright turquoise lake along a straight edge"><figcaption class="mt-2 text-[.82rem] text-[#52615c]">Where the forest stops</figcaption></figure></li>
    <li class="mb-3 break-inside-avoid md:mb-4"><figure><img src="https://images.unsplash.com/photo-1505144808419-1957a94ca61e?auto=format&fit=crop&w=600&h=900&q=70" class="block h-auto w-full rounded-[10px] bg-[#d3dbd8]" width="600" height="900" loading="lazy" alt="Aerial view of a white wave breaking along a narrow strip of sand"><figcaption class="mt-2 text-[.82rem] text-[#52615c]">Shore break from above</figcaption></figure></li>
    <li class="mb-3 break-inside-avoid md:mb-4"><figure><img src="https://images.unsplash.com/photo-1418065460487-3e41a6c84dc5?auto=format&fit=crop&w=600&h=400&q=70" class="block h-auto w-full rounded-[10px] bg-[#d3dbd8]" width="600" height="400" loading="lazy" alt="Rows of dark pine trees disappearing into thick white mist"><figcaption class="mt-2 text-[.82rem] text-[#52615c]">Morning fog</figcaption></figure></li>
    <li class="mb-3 break-inside-avoid md:mb-4"><figure><img src="https://images.unsplash.com/photo-1505118380757-91f5f5632de0?auto=format&fit=crop&w=600&h=960&q=70" class="block h-auto w-full rounded-[10px] bg-[#d3dbd8]" width="600" height="960" loading="lazy" alt="Aerial view of turquoise water and white surf along a pale sandy beach"><figcaption class="mt-2 text-[.82rem] text-[#52615c]">Low tide</figcaption></figure></li>
    <li class="mb-3 break-inside-avoid md:mb-4"><figure><img src="https://images.unsplash.com/photo-1502082553048-f009c37129b9?auto=format&fit=crop&w=600&h=450&q=70" class="block h-auto w-full rounded-[10px] bg-[#d3dbd8]" width="600" height="450" loading="lazy" alt="A single broad oak tree standing in green grass under a pale blue sky"><figcaption class="mt-2 text-[.82rem] text-[#52615c]">The old oak</figcaption></figure></li>
    <li class="mb-3 break-inside-avoid md:mb-4"><figure><img src="https://images.unsplash.com/photo-1441974231531-c6227db76b6e?auto=format&fit=crop&w=600&h=750&q=70" class="block h-auto w-full rounded-[10px] bg-[#d3dbd8]" width="600" height="750" loading="lazy" alt="Sunlight falling across a path through a tall pine forest"><figcaption class="mt-2 text-[.82rem] text-[#52615c]">Path at noon</figcaption></figure></li>
    <li class="mb-3 break-inside-avoid md:mb-4"><figure><img src="https://images.unsplash.com/photo-1447752875215-b2761acb3c5d?auto=format&fit=crop&w=600&h=450&q=70" class="block h-auto w-full rounded-[10px] bg-[#d3dbd8]" width="600" height="450" loading="lazy" alt="A wooden footbridge with metal railings leading into a dense green forest"><figcaption class="mt-2 text-[.82rem] text-[#52615c]">The footbridge</figcaption></figure></li>
    <li class="mb-3 break-inside-avoid md:mb-4"><figure><img src="https://images.unsplash.com/photo-1511884642898-4c92249e20b6?auto=format&fit=crop&w=600&h=800&q=70" class="block h-auto w-full rounded-[10px] bg-[#d3dbd8]" width="600" height="800" loading="lazy" alt="A river running through a misty pine forest in a steep valley"><figcaption class="mt-2 text-[.82rem] text-[#52615c]">Valley river</figcaption></figure></li>
    <li class="mb-3 break-inside-avoid md:mb-4"><figure><img src="https://images.unsplash.com/photo-1518837695005-2083093ee35b?auto=format&fit=crop&w=600&h=400&q=70" class="block h-auto w-full rounded-[10px] bg-[#d3dbd8]" width="600" height="400" loading="lazy" alt="A close, low view of dark blue sea swell under a pale sky"><figcaption class="mt-2 text-[.82rem] text-[#52615c]">Swell</figcaption></figure></li>
    <li class="mb-3 break-inside-avoid md:mb-4"><figure><img src="https://images.unsplash.com/photo-1482192596544-9eb780fc7f66?auto=format&fit=crop&w=600&h=600&q=70" class="block h-auto w-full rounded-[10px] bg-[#d3dbd8]" width="600" height="600" loading="lazy" alt="Mist drifting over a pine forest seen from above, with a few trees turning orange"><figcaption class="mt-2 text-[.82rem] text-[#52615c]">Autumn mist</figcaption></figure></li>
    <li class="mb-3 break-inside-avoid md:mb-4"><figure><img src="https://images.unsplash.com/photo-1439405326854-014607f694d7?auto=format&fit=crop&w=600&h=400&q=70" class="block h-auto w-full rounded-[10px] bg-[#d3dbd8]" width="600" height="400" loading="lazy" alt="Green sea waves under a cloudy sky with the sun setting on the horizon"><figcaption class="mt-2 text-[.82rem] text-[#52615c]">Last light at sea</figcaption></figure></li>
  </ul>
</section></div>

<div><span class="mb-4 block text-[.72rem] tracking-[.12em] text-[#52615c] uppercase">Grid masonry with wide and tall tiles</span>
<section aria-labelledby="mg-title">
  <div class="mb-5 flex flex-wrap items-end justify-between gap-x-6 gap-y-1.5"><div><p class="text-xs leading-[normal] font-bold tracking-[.14em] text-[#1d6a5b] uppercase">Kitchen Diaries</p><h2 id="mg-title" class="mt-1 text-[1.75rem] leading-[1.15] font-bold tracking-[-.02em]">Spring menu shoot</h2></div><p class="text-[.9rem] leading-[normal] text-[#52615c]">12 photographs · Inès Garnier</p></div>
  <ul class="grid grid-flow-row-dense auto-rows-[84px] grid-cols-2 gap-2.5 md:auto-rows-[110px] md:grid-cols-4 md:gap-3.5" role="list">
    <li class="min-w-0 col-span-2 row-span-3"><figure class="relative h-full overflow-hidden rounded-[14px] bg-[#d3dbd8]"><img src="https://images.unsplash.com/photo-1504674900247-0877df9cc836?auto=format&fit=crop&w=900&h=600&q=70" class="block size-full object-cover" width="900" height="600" loading="lazy" alt="Three plates of grilled meat, salad and fish on a wooden table, scattered with chillies, herbs and cashews"><figcaption class="absolute bottom-2.5 left-2.5 rounded-full bg-[rgba(10,22,18,.8)] px-[11px] py-[5px] text-[.78rem] font-semibold text-white">Sunday table</figcaption></figure></li>
    <li class="min-w-0 row-span-3"><figure class="relative h-full overflow-hidden rounded-[14px] bg-[#d3dbd8]"><img src="https://images.unsplash.com/photo-1540189549336-e6e99c3679fe?auto=format&fit=crop&w=500&h=760&q=70" class="block size-full object-cover" width="500" height="760" loading="lazy" alt="A dark plate of shredded salad beside a glass of orange juice and halved oranges"><figcaption class="absolute bottom-2.5 left-2.5 rounded-full bg-[rgba(10,22,18,.8)] px-[11px] py-[5px] text-[.78rem] font-semibold text-white">Citrus slaw</figcaption></figure></li>
    <li class="min-w-0 row-span-2"><figure class="relative h-full overflow-hidden rounded-[14px] bg-[#d3dbd8]"><img src="https://images.unsplash.com/photo-1546069901-ba9599a7e63c?auto=format&fit=crop&w=500&h=500&q=70" class="block size-full object-cover" width="500" height="500" loading="lazy" alt="A bowl of salmon, egg, sweetcorn, tomato and red cabbage on a white table"><figcaption class="absolute bottom-2.5 left-2.5 rounded-full bg-[rgba(10,22,18,.8)] px-[11px] py-[5px] text-[.78rem] font-semibold text-white">Salmon bowl</figcaption></figure></li>
    <li class="min-w-0 row-span-2"><figure class="relative h-full overflow-hidden rounded-[14px] bg-[#d3dbd8]"><img src="https://images.unsplash.com/photo-1565299624946-b28f40a0ae38?auto=format&fit=crop&w=500&h=500&q=70" class="block size-full object-cover" width="500" height="500" loading="lazy" alt="A sliced pizza topped with chicken, red onion and herbs on a wooden board"><figcaption class="absolute bottom-2.5 left-2.5 rounded-full bg-[rgba(10,22,18,.8)] px-[11px] py-[5px] text-[.78rem] font-semibold text-white">Flatbread</figcaption></figure></li>
    <li class="min-w-0 row-span-2"><figure class="relative h-full overflow-hidden rounded-[14px] bg-[#d3dbd8]"><img src="https://images.unsplash.com/photo-1473093295043-cdd812d0e601?auto=format&fit=crop&w=500&h=500&q=70" class="block size-full object-cover" width="500" height="500" loading="lazy" alt="Bow-tie pasta with pesto, cherry tomatoes and rocket in a white bowl"><figcaption class="absolute bottom-2.5 left-2.5 rounded-full bg-[rgba(10,22,18,.8)] px-[11px] py-[5px] text-[.78rem] font-semibold text-white">Farfalle al pesto</figcaption></figure></li>
    <li class="min-w-0 row-span-3"><figure class="relative h-full overflow-hidden rounded-[14px] bg-[#d3dbd8]"><img src="https://images.unsplash.com/photo-1555939594-58d7cb561ad1?auto=format&fit=crop&w=500&h=760&q=70" class="block size-full object-cover" width="500" height="760" loading="lazy" alt="Grilled meat and vegetable skewers on paper with small bowls of sauce, seen from above"><figcaption class="absolute bottom-2.5 left-2.5 rounded-full bg-[rgba(10,22,18,.8)] px-[11px] py-[5px] text-[.78rem] font-semibold text-white">Skewers</figcaption></figure></li>
    <li class="min-w-0 row-span-3"><figure class="relative h-full overflow-hidden rounded-[14px] bg-[#d3dbd8]"><img src="https://images.unsplash.com/photo-1567620905732-2d1ec7ab7445?auto=format&fit=crop&w=500&h=760&q=70" class="block size-full object-cover" width="500" height="760" loading="lazy" alt="Syrup being poured over a tall stack of pancakes topped with butter and a sprig of herbs"><figcaption class="absolute bottom-2.5 left-2.5 rounded-full bg-[rgba(10,22,18,.8)] px-[11px] py-[5px] text-[.78rem] font-semibold text-white">Pancake stack</figcaption></figure></li>
    <li class="min-w-0 row-span-2"><figure class="relative h-full overflow-hidden rounded-[14px] bg-[#d3dbd8]"><img src="https://images.unsplash.com/photo-1484723091739-30a097e8f929?auto=format&fit=crop&w=500&h=500&q=70" class="block size-full object-cover" width="500" height="500" loading="lazy" alt="French toast with banana slices and blueberries on a dark plate"><figcaption class="absolute bottom-2.5 left-2.5 rounded-full bg-[rgba(10,22,18,.8)] px-[11px] py-[5px] text-[.78rem] font-semibold text-white">French toast</figcaption></figure></li>
    <li class="min-w-0 row-span-2"><figure class="relative h-full overflow-hidden rounded-[14px] bg-[#d3dbd8]"><img src="https://images.unsplash.com/photo-1488477181946-6428a0291777?auto=format&fit=crop&w=500&h=500&q=70" class="block size-full object-cover" width="500" height="500" loading="lazy" alt="Small glass jars of a creamy dessert topped with strawberries on a white table"><figcaption class="absolute bottom-2.5 left-2.5 rounded-full bg-[rgba(10,22,18,.8)] px-[11px] py-[5px] text-[.78rem] font-semibold text-white">Strawberry pots</figcaption></figure></li>
    <li class="min-w-0 row-span-3"><figure class="relative h-full overflow-hidden rounded-[14px] bg-[#d3dbd8]"><img src="https://images.unsplash.com/photo-1482049016688-2d3e1b311543?auto=format&fit=crop&w=500&h=760&q=70" class="block size-full object-cover" width="500" height="760" loading="lazy" alt="Toast topped with salad leaves and halved boiled eggs on a dark plate"><figcaption class="absolute bottom-2.5 left-2.5 rounded-full bg-[rgba(10,22,18,.8)] px-[11px] py-[5px] text-[.78rem] font-semibold text-white">Egg toast</figcaption></figure></li>
    <li class="min-w-0 col-span-2 row-span-3"><figure class="relative h-full overflow-hidden rounded-[14px] bg-[#d3dbd8]"><img src="https://images.unsplash.com/photo-1512621776951-a57141f2eefd?auto=format&fit=crop&w=900&h=600&q=70" class="block size-full object-cover" width="900" height="600" loading="lazy" alt="A bowl of avocado, chickpeas, tomatoes, roast sweet potato and greens on a wooden table"><figcaption class="absolute bottom-2.5 left-2.5 rounded-full bg-[rgba(10,22,18,.8)] px-[11px] py-[5px] text-[.78rem] font-semibold text-white">Market bowl</figcaption></figure></li>
    <li class="min-w-0 row-span-2"><figure class="relative h-full overflow-hidden rounded-[14px] bg-[#d3dbd8]"><img src="https://images.unsplash.com/photo-1490645935967-10de6ba17061?auto=format&fit=crop&w=500&h=500&q=70" class="block size-full object-cover" width="500" height="500" loading="lazy" alt="A blue plate of courgette noodles, boiled eggs, greens and avocado on a rustic table with white blossom"><figcaption class="absolute bottom-2.5 left-2.5 rounded-full bg-[rgba(10,22,18,.8)] px-[11px] py-[5px] text-[.78rem] font-semibold text-white">Spring plate</figcaption></figure></li>
  </ul>
</section></div>

About this set

Two masonry layouts for photos that do not share one shape. Column masonry puts twelve forest and coast photographs of different heights into three columns, two on phones, using CSS multi-column layout, so every photo keeps its own proportions and a short caption sits under each one. It is the quickest masonry to build and suits portfolios, mood boards and travel journals; the order runs down each column rather than across. Grid masonry with wide and tall tiles is a twelve-dish food shoot on CSS Grid: rows have a fixed height, ordinary tiles span two rows, tall tiles span three and wide tiles span two columns and three rows, and grid-auto-flow: dense packs them so the edges come out flush, on four columns or two. Here the order runs across, and the dark caption pill sits on each photo. Bootstrap 5 has no masonry layout of its own, so the Bootstrap version uses the same CSS columns and grid with .figure, .badge and the display utilities, and the Tailwind version uses columns-*, break-inside-avoid, row-span and grid-flow-row-dense. No JavaScript.

What’s included

  • CSS multi-column masonry that keeps every photo at its own aspect ratio
  • Grid masonry with tall and wide tiles packed flush by grid-auto-flow: dense
  • Two columns on phones, three or four on wider screens
  • No JavaScript and no masonry library
  • Row height, gaps and column count set with custom properties

Accessibility

Each photo has descriptive alt text, and the short visible captions name the shot rather than repeat the description. The galleries are plain lists of figures with nothing to operate, so there is no keyboard trap or hidden content. Nothing animates. In the column layout screen readers read the photos in source order, which runs down each column.

Customise it

Set --ms-cols and --ms-gap on .ms for the column masonry, and --mg-row and --mg-gap on .mg for the grid version; add .mg-tall or .mg-wide to any tile to change its size. In Tailwind change columns-2 md:columns-3, auto-rows-[110px] and the row-span-* or col-span-2 classes.