Image gallery design: pick the layout the work needs

Three layouts and what each is for

The question to ask is whether the frame of each picture is part of the work. A photographer's landscape crop is deliberate, so squeezing it into a square thumbnail changes the picture. A ceramicist's product shots were probably all taken on the same table at the same distance, so a uniform gallery grid shows them side by side and invites comparison. A designer's case studies usually work better as a few large covers that lead to separate pages than as forty thumbnails.

Building a portfolio gallery layout in CSS

A uniform grid needs very little code: display: grid with grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)) reflows from one column on a phone to four or five on a wide screen. Give the images a fixed aspect-ratio and object-fit: cover so the rows line up, and use object-position to keep faces and subjects in frame when the crop is tight.

True masonry is still settling in browsers. MDN marks the CSS masonry layout as experimental with limited availability, so most sites fake it with CSS columns or a script. Both approaches can reorder items visually, so a keyboard user tabbing through linked thumbnails may jump from the top of column one to the top of column two. If the order matters, keep it in rows.

• Reserve the space. Set width and height or an aspect ratio on every image so the page doesn't jump as they load.
• Serve sizes, not one file. Use srcset and sizes so a phone isn't downloading a 3,000px original for a 300px thumbnail.
• Lazy-load below the fold. loading="lazy" on everything except the first row.
• Keep gaps consistent. One gap value for rows and columns reads as deliberate; uneven gaps read as a mistake.

Captions, alt text and order

A caption and alt text do different jobs. The caption is visible to everyone and can carry the title, the client, the year or the materials. Alt text describes what's in the picture for people who can't see it. Wrapping an image and its caption in figure and figcaption ties the two together and gives the figure an accessible name. The W3C's images tutorial also covers groups of images: when several pictures make one point, such as five angles of the same chair, one description can cover the set and the rest can be marked decorative.

1. Write captions with facts a visitor would ask about: what it is, who it was for, what it's made of.
2. Write alt text for the content of the picture, not its file name or "image of".
3. Put the strongest piece first. People judge a gallery on its first row.
4. Cut the weakest third. A gallery of twelve good pieces beats thirty mixed ones.

Lightboxes and keyboard access

A lightbox, the overlay that enlarges a thumbnail, is the part of a photo gallery website design most likely to break accessibility. If you use one, it must open from a real button or link, move focus into the overlay, close with Escape, return focus to the thumbnail it came from and let keyboard users step to the next image. Often a simpler pattern works as well: link each thumbnail to the full-size image or to its own project page, which the browser already handles perfectly.

Galleries in Anticode

In Anticode, Work is one of the optional separate pages a site can have, alongside Shop, Services, About and others, and a portfolio build gets one by default. Design-engine pages draw on a curated library of photos from Unsplash, each with written alt text, served at several widths with lazy loading below the first screen. To show your own photos, keep the work in a CMS collection whose image field holds the address of a photo you host, which gives it its own section and pages alongside the design engine's gallery, or build the gallery as an app: uploaded files are checked by their first bytes, stored under your account and seen by the model when it places them. Uploads are stored and served as you uploaded them, without resizing, so export them at a sensible size first.

Sentinel and the publish gate check that every image has a text alternative (Sentinel treats an empty alt as missing; the gate accepts it). Neither can tell whether the description is accurate, so read it back. For more on choosing pictures, see website photography direction and image aspect ratios.

Questions people ask

Should a gallery grid crop my photos?

Only if the crop doesn't change the picture. For product shots and headshots a fixed ratio is fine; for photography where the frame matters, use masonry or a single column instead.

How many images should a portfolio gallery show?

Fewer than you think. Ten to twenty strong pieces, with the best first, usually say more than a complete archive.

Do gallery images need captions?

They need alt text. Captions are optional but help when visitors will ask what something is, who it was for or what it cost to make.

Is a lightbox necessary?

No. Linking each thumbnail to a larger image or a project page is simpler and works with every keyboard and screen reader.

Sources

1. aspect-ratio, MDN Web Docs, checked 24 October 2026
2. Masonry layout, MDN Web Docs, checked 24 October 2026
3. <figcaption>, MDN Web Docs, checked 24 October 2026
4. Images Tutorial, W3C Web Accessibility Initiative, checked 24 October 2026