DEV Community

Cover image for CSS Grid Based Responsive Image Gallery
FollowAndrew
FollowAndrew

Posted on • Originally published at followandrew.dev

14 5

CSS Grid Based Responsive Image Gallery

Just pushed another CSS tutorial, this one a practical exercise on using the CSS grid to create a fancy responsive web gallery. The benefits of using the grid here are we can have a 'masonry' style layout, without any javascript.


Please consider subscribing to the YouTube Channel!


Here are a few of the CSS tips & tricks I use in the video to pull off the gallery.

  • CSS Grid Template Columns - To create a 6 column grid
  • CSS Grid Template Auto Rows - To create alternating height auto rows for visual interest
  • CSS Animations - To create a 'label' that animates down into view on gallery hover
  • CSS Transforms - To create a 'zoom effect' when hovering on an image thumbnail
  • CSS Grid Spans - To make it super easy to have images span arbitrary columns and rows
  • CSS Object Fit - To make the thumbnails stay centered when resizing the viewport
  • CSS Backdrop Filter - To create some fancy effects (blur & saturation) behind the label when it animates into view (won't work in Firefox)
  • CSS Media Query - 2 liner to make a mobile view flow into a single column

Image of Datadog

How to Diagram Your Cloud Architecture

Cloud architecture diagrams provide critical visibility into the resources in your environment and how they’re connected. In our latest eBook, AWS Solution Architects Jason Mimick and James Wenzel walk through best practices on how to build effective and professional diagrams.

Download the Free eBook

Top comments (1)

Collapse
 
souvikkundu88 profile image
Souvik Kundu

Very useful quick read. Thank you!

Image of Docusign

🛠️ Bring your solution into Docusign. Reach over 1.6M customers.

Docusign is now extensible. Overcome challenges with disconnected products and inaccessible data by bringing your solutions into Docusign and publishing to 1.6M customers in the App Center.

Learn more