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
 
souvik88 profile image
Souvik Kundu

Very useful quick read. Thank you!

Thank you.

Β 
Thanks for visiting DEV, we’ve worked really hard to cultivate this great community and would love to have you join us. If you’d like to create an account, you can sign up here.