CSS Grid Based Responsive Image Gallery

#css #webdev #tutorial

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

How I fixed 20 seconds of lag for every user in just 20 minutes.

Our AI agent was running 10-20 seconds slower than it should, impacting both our own developers and our early adopters. See how I used Sentry Profiling to fix it in record time.