Masonry image gallery

Filter images by common themes and display them in a responsive masonry image gallery.

Overview

Your Challenge is to create an image gallery with a filter function for viewing images by common themes. The image gallery uses a masonry layout, which causes the images to respect their aspect ratio and automatically fill the gaps between other images.

Your Challenge is complete when:

The website is as close to the original design as possible
The website is responsive and viewable on multiple screen sizes
Elements have the correct state styles (hover, focus, etc.)
The image gallery follows a masonry layout
Images are hidden or visible depending on what filter is selected

Solutions

Masonry image gallery with React and CSS

Create an eye-catching masonry image gallery using React and CSS. Learn to craft reusable components and design responsive, visually stunning layouts.

React

CSS

Vite

What's included

Challenges include all the assets you would expect from a designer in real-world projects, plus some resources to help you complete the Challenge.

Organized Figma design file
Detailed desktop, tablet, and mobile layouts
Comprehensive design system
Relevant fonts, colors, SVGs, and images

Alternative Solutions from members
Straightforward quick-start guide
Recommended list of learning resources
Access to community Discord channels