Search Subscribe
Home/Frontend/How To Build An Expandable Accessible Gallery — Smashing Magazine
Frontend

How To Build An Expandable Accessible Gallery — Smashing Magazine

One of the use cases for using CSS Grid is to display a gallery of images, but a gallery on its own may not be that exciting. In this article, Silvestar Bistrović will be looking at how to set up a gallery that is expandable as well as accessible with a few tips and tricks along the way. Let’s get started!

SBSilvestar Bistrovic
Silvestar BistrovicSmashing Magazine
·October 4, 2021
How To Build An Expandable Accessible Gallery — Smashing Magazine

One of the use cases for using CSS Grid is to display a gallery of images, but a gallery on its own may not be that exciting. In this article, Silvestar Bistrović will be looking at how to set up a gallery that is expandable as well as accessible with a few tips and tricks along the way. Let’s get started!

SBSilvestar Bistrovic
Written by
Silvestar Bistrovic
Smashing Magazine

Silvestar Bistrović is a fearless web engineer, CSS developer, JAMstack enthusiast, WordPress theme specialist, author of the UI Dev Newsletter , and founder of … More about Silvestar ↬

All articles by Silvestar Bistrovic →
Keep reading

Related Articles

Frontend — Let’s Use the Emergent CSS random() Function in all the Browsers

Let’s Use the Emergent CSS random() Function in all the Browsers

The journey to create a polyfill for the upcoming CSS random() function that works in all browsers. Let’s Use the Emergent CSS random() Function in all the Browsers originally handwritten and published with love on CSS-Tricks . You should really get the newsletter as well.

LMLee MeyerLee Meyer·August 31, 2026Frontend
Frontend — What’s !important #18: , Syntax ::highlight()ing, named-feature(), and More

What’s !important #18: , Syntax ::highlight()ing, named-feature(), and More

Well, that’s a wrap. No, not a flex-wrap, but rather today marks a new day, week, month, season, aaaand new edition of What’s important (#18), bringing you the best content that developers have produced over the last couple of weeks or so. What’s !important #18: <geolocation>, Syntax ::highlight()ing, named-feature(), and More originally handwritten and published with love on CSS-Tricks . You shou

DSDaniel SchwarzDaniel Schwarz·August 31, 2026Frontend
Frontend — Creating Web Widgets Using the Document Picture-in-Picture API

Creating Web Widgets Using the Document Picture-in-Picture API

The general idea is that we create a Document Picture-in-Picture window (DPIP window), and then we put HTML, CSS, and JavaScript into it. Creating Web Widgets Using the Document Picture-in-Picture API originally handwritten and published with love on CSS-Tricks . You should really get the newsletter as well.

DSDaniel SchwarzDaniel Schwarz·August 27, 2026Frontend