Tutorials

CSS Grid Responsive Image Gallery Tutorial

css grid 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