DEV Community

Cover image for CSS Grid Based Responsive Image Gallery
FollowAndrew
FollowAndrew

Posted on • Originally published at followandrew.dev

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

Top comments (1)

Collapse
 
souvikkundu88 profile image
Souvik Kundu

Very useful quick read. Thank you!