← All layouts  ·  Media

Photo gallery

Masonry grid with albums and a lightbox trigger.

A masonry grid keeps original aspect ratios, which matters more for photographs than the tidiness of a uniform grid.

  • .ms-thumb
  • .ms-btn
  • .ms-toolbar
  • .ms-chip
  • .ms-input
  • .ms-stat

Open full page

Live

The layout as it renders, in a frame at its own width. Resize the window to watch it respond — the frame is a real viewport.

How to build it

This is the layout's template, read from disk — the same file the frame above renders, so it cannot drift out of date. Copy it into your own page and replace the content; every class in it ships in mcgowan.css.

<header class="ms-topbar">
    <div class="ms-logo"><a class="u-link" href="#">Reel</a></div>
    <nav class="ms-topbar__nav"><a href="#">Browse</a><a href="#">Series</a><a href="#">My list</a></nav>
    <div class="ms-toolbar">
        <input class="ms-input ms-input--sm" placeholder="Search" style="max-width:180px">
        <span class="ms-avatar-sm">ER</span>
    </div>
</header>

<div class="u-container u-py-6">
    <div class="ms-toolbar">
        <div>
            <h1 style="margin:0">Cape Wrath, September</h1>
            <p class="ms-stat__meta">182 photographs &middot; Ellie Roberts</p>
        </div>
        <span class="ms-toolbar__spacer"></span>
        <div class="ms-chip-set">
            <button class="ms-chip ms-chip--active" type="button">Grid</button>
            <button class="ms-chip" type="button">Masonry</button>
        </div>
        <button class="ms-btn ms-btn--outline ms-btn--sm">Download all</button>
    </div>

    <div class="ms-gallery">
        <span class="ms-thumb ms-thumb--square"></span>
        <span class="ms-thumb ms-thumb--square"></span>
        <span class="ms-thumb ms-thumb--square"></span>
        <span class="ms-thumb ms-thumb--square ms-gallery__feature"></span>
        <span class="ms-thumb ms-thumb--square"></span>
        <span class="ms-thumb ms-thumb--square"></span>
        <span class="ms-thumb ms-thumb--square"></span>
        <span class="ms-thumb ms-thumb--square"></span>
        <span class="ms-thumb ms-thumb--square"></span>
        <span class="ms-thumb ms-thumb--square"></span>
        <span class="ms-thumb ms-thumb--square"></span>
        <span class="ms-thumb ms-thumb--square"></span>
    </div>

    <div class="ms-card u-mt-6">
        <h2>Lightbox</h2>
        <p class="ms-stat__meta">What opens when a tile is clicked. Shown inline here
            because a modal in a static example cannot be opened.</p>
        <div class="u-grid u-grid-cols-12 u-mt-4">
            <div class="u-col-12 u-col-md-8"><span class="ms-thumb"></span></div>
            <div class="u-col-12 u-col-md-4">
                <h3>Sandwood Bay, first light</h3>
                <table class="ms-table ms-table--compact">
                    <tr><th>Taken</th><td>11 September 2025</td></tr>
                    <tr><th>Camera</th><td>35mm, f/8, 1/250</td></tr>
                    <tr><th>Place</th><td>Sutherland</td></tr>
                </table>
                <div class="ms-toolbar">
                    <button class="ms-btn ms-btn--sm ms-btn--outline">Previous</button>
                    <button class="ms-btn ms-btn--sm ms-btn--outline">Next</button>
                </div>
            </div>
        </div>
    </div>
</div>

More media layouts

Video library
Music player
Podcast episode