CSS Grid Responsive Image Gallery Tutorial

all right in this video tutorial we're going to be learning how to build an entire CSS grid based web gallery so this project is going to be an exercise style project where we're gonna be building this gallery from start to finish I'm just going to quickly show you the ending product so you can see what we're gonna build so here's the gallery inside of our web browser here and you can see as I hover over any of these thumbnails I get a nice little animation where we scale up and we also slide in a little byline or a little title of the image as well so that's kind of way each of these work you can see how the gallery is laid out some of these are profiles some are landscapes I'll hand scape some are square based images and I can scroll up and down here I mean you can kind of see that the gallery just naturally flows now it's also responsive so watch what happens when I resize the browser window here you can see that all of the images are automatically scaling and maintaining some of the proportion and they're staying in the middle maintaining aspect ratio even as we scale up and down so I am in the code editor visual studio code and I've got here just a simple HTML file it's blank and I've got a CSS file created that's also blink you'll want to go ahead and set those up as well so to start things out inside of es code you can just type do C for doc and hit tab and that will give you some boilerplate HTML that you can then work with I'll just give this a title of CSS grid and then I'm gonna go ahead and just link up my stylesheet here as well so you'll want to go ahead and add line six and of course this href needs to be linked up to your CSS stylesheets name however you name yours okay now that we've got that we're gonna go ahead and add in just a little bit of boilerplate code I'm just gonna be checking my notes over here as we go along so that we can get our HTML structure set up for the gallery so we're gonna have a couple of div tags here so let's just start out and we'll just put in a header one just to kind of give this page a title we'll just call this the CSS creating calorie and let's see that come over here so that's popping up over there and next let's go ahead and give this guy a container so we're gonna give a div a class equals container and this div is just gonna basically house all the different thumbnails that are going to be part of our web gallery here now each of the thumbnails individually is going to be housed in a couple of divs so we can kind of do some fancy things with resizing and animation as well as overlay a little bit of a title to the image so those we're gonna use a little bit of image script here but let's just call this guy let's give it a will say div dot gallery - container so if we hit tab here of course that's going to spit that out like so but we don't want to quite do that yet so I did command Z and we're gonna do this is gonna have a child that has a div that has a class of image which is going to have a child which is an image and that should that should be good so let's go ahead and tap on that and you can see this creates some code like this and I'm going to reformat this just a little bit so you can see it better so we have a gallery container we have a div that's called image and then we have our actual image now what I'm gonna do for my image placeholders is I'm gonna use a service called unsplash they have an API which will just pull in random images to kind of use as we're mocking up here so I'm gonna say HTTP colon slash slash source dot unsplash.com and then right here you put this size so this one I'm gonna do 1600 by 900 so this is gonna give me sort of a landscape orientation sort of a photo and then I can put what type so I'm just gonna say give me any photo that's a nature theme or something like that okay and then I'll alt here I'll just gonna call this nature and that should be fine right there so let's go ahead and save and see if we can find an image so you can see it's giving me an error here that's saying hey I can't find that photo so let's maybe refine this or double check and make sure we have this typed in correctly and I've spotted the issue here it's actually I did a capital X they're supposed to be a lowercase sixteen by nine hundred and now when I save you can see it's giving me some sort of a random image that is nature based that's sixteen hundred by nine hundred in aspect ratio so that's working out just fine okay then right below this we're gonna add one more div this is gonna have a class I'm just going to call this guy text or lack of a better and we could call it I don't know something else title or by line or something and this is going to house our little overlay that flies down so I'm just gonna call this guy in nature I'll just kind of keep the title simple to match in with there you can see that's appearing it's really hard to see what that's appearing right down there in nature in the browser window okay so that's kind of the basic for a single element or a single gallery item so basically our process now is to copy this as many images as we want so I'm just gonna copy a whole bunch of these down because we're gonna be messing with this in a minute so I'll just space these out I'm gonna say one two three four five six seven eight we'll just do eight for now okay so you can see over here in the preview I've got all sorts of images right now they're all the same so now I'm just gonna go update these a little bit and switch this out so this one I'm gonna say nature whoops I got to change all these so nature nature nature this one I'll say people people and then people and then maybe we'll say sport or sport and fitness I'm just making these up you can do any sort of term you want here I'm just trying to get some different types of images of course in my little gallery here and let's say food which one did I last do fitness so come over here we'll say food food food maybe we'll have one called travel travel travel maybe we'll do one called art so art art art how many more do we got down here let's see we'll do another one called I don't know let's say cars or something cars cars cars okay so we'll save here and now you can see I've got all sorts of different styles of images in the gallery that unsplash is bringing in so perfect now the benefit here of using this API is we can then modify the width and height parameters to give a square images tall images so that we can sort of replicate and some unknowns right typically when you're building a web gallery a lot of times those images are going to be coming in from a dynamic website so you don't know the aspect ratios or sizes or if you have you know eight that are portrait or eight they're landscape and often they're missing matched so this will enable us to use the CSS grid to its full potential because we can make some square some round some rectangle some long skinny and the CSS grid is going to be what's does the magic to make those all formate format into a sort of nice masonry style layout so we're going to be modifying a few of these values here in a minute okay so that is pretty much it for the HTML so we we are done there so we just have a bunch of images and now we're going to start to resize and edit these things in CSS to turn this into a full-fledged gallery so I'm going to jump over here to this CSS sheet and this is where we're gonna do most of our work here next okay the first thing we're going to do is just give a simple rule here for the body tag so our body tag is going to have a simple margin around so we're gonna say margin of 20 pixels and let's just give them adding padding of zero pixels we're gonna say text-align:center that way all of our labels will be centered you can see right there it makes that little label right there centered in the screen right there so that's looking fine that's really all we're gonna do on the body tag next let's mess around with the container now remember the container is the master container for all of the grid items so because this tutorial is an exercise tutorial if you want to learn all about the CSS grid I'll link to the video where I did the CSS grid overview it's about a 45 minute video that tells you everything you need to know about CSS grid so I'm not going to explain the grid in this process rather we're going to be using the grid in this tutorial so the container item is going to be set to display grid so that all of its child items will then inherit this grid property so what we're going to do is we're going to set our grid template and the columns property and we're gonna set this guy to six columns okay so we're going to be using the repeat and then six fractions or rather six columns and one fraction each so you can see when I save here that's going to bring this up so that these items start to lay out in six columns okay now the rows right now they're flowing so we're gonna say grid Auto rows and we're gonna say 100 pixels and 300 pixels whoops not 100 pixels 300 pixels and let's give these guys a grid gap the grid wrap is the sort of margin in between all the great items we're gonna set that to 10 pixels okay so you can see right now things are starting to get a little bit crazy because our images are so large unsplash has very large images they're kind of overlapping and things are getting a little bit wonky in the grid so we'll have to fix that here in a minute but we do have our columns now set up as far as our grid goes now if you're using Firefox for your web browser you can turn on some grid rules which will overlay a grid this preview I have is actually done right now in Chrome but I'll show you some of the developer tools to work with CSS grid towards the end of this tutorial it'll help you out okay next let's go ahead and play around with our individual gallery items so remember the container right here is just a master div that contains all gallery items and now we're going to be playing around with each of these and I just noticed a spelling error as I'm looking at this you probably notice this a long time ago but I said gallery container and I spelled container wrong here so I'm going to do a command C command F search for that and I'm gonna replace it with the proper term C int a int R and just go ahead and do a mass update there we go so I fixed all those instances of the container okay so we have our images there are items so let's make sure I don't see any other mistakes here before we get going and I did notice one error here that we're gonna fix really quick so I'm actually missing a div so we have our gallery container so we have our gallery container excuse me and then inside of that we need one more element here we need an item called div let's give this guy a class of gallery - item like so and then this gallery item has to surround the those two items like that so let's just tab this over a little bit there we go so we have a gallery container this is the actual CSS grid element and then inside of there we have an gallery item which surrounds the image and the title or text so there's a couple there's a couple extra divs in here but the reason why we need a couple extra divs you'll see later in CSS because we're gonna do some fancy scaling and automatic resizing we need a wrapper element to round those in order to do it properly or in order to make what we're doing work I guess I should say so we need to add that to each one of these so I'm gonna pause the video I'm gonna go ahead and add this extra div to each of my gallery containers and then we'll proceed okay so I've added all those and I just wanted to quickly show you a little plugin I have in vs code because I've added a bunch my indenting may be off slightly so I've got a plug-in in here called beautify so I can come in here to my beautify file and click that and it's just gonna automatically reform at all those divs so they have the proper indenting so that's kind of a nice little feature there okay so now we have that extra gallery item in place inside of our gallery container we can continue on here in our CSS quest so let's continue to move along here and we check my notes so we're gonna be working on the gallery items next so we're gonna say doc gallery - item and the gallery item is we're going to give a width of 100% and also a height of 100% and then we're gonna give them a position of relative and the reason why we're giving them this position of relative is because that's going to allow us to position those labels and animate the little label when we hover on later so that will do it for the gallery items okay next we're going to be working with the text a little bit so let's kind of reformat here and make sure we have things in order to see this little property we are going to add a couple of classes that will work with our images because we really want to scale those down and make it so we can see our grid a little bit better before we start doing more CSS sort we can see the preview so we're gonna do a dot gallery - item so if you recall here this is the gallery item right here and it has a div and then an image inside of it so we're gonna be targeting the gallery item dot image so again this is actually targeting this div right here and we're gonna say width 100% height 100% and we're gonna set the overflow to hidden okay so that will do that and then next we're gonna be targeting the actual images so we're gonna say gallery - item dot image IMG so the actual image tags inside of those two divs so we're gonna set width again to 100% we're gonna set height to 100% and this is a new CSS property that some people are aware aware of it's called object fit and what this property allows us to do is have an element resize itself it kind of behaves like the background cover in the background image covers but it behaves directly on an image itself so we're going to set this to cover and that is finally allowing us to see our grid here so you can see once we set that to cover in other words each of the images is going to automatically resize itself to be the width and height of its bounds now I'm going to explain the grid here really quickly because you can see I have my one two three four five six columns and they have equal fractions meaning there's taking up equal amount of space as I resize my browser window here you can see that happening and notice that the first row is 100 pixels and the second row is 300 pixels and that's because we set up our six columns and then we set up our rows to repeat as 100 300 100 300 so if these things were to wrap for example if I set this to 2 just to illustrate this you can see that that's 100 that's 300 that's 100 that's 300 and we did that just to add some interest is our gallery auto build so they're not all the exact same height so we'll change that back to 6 and continue along here so now we can actually see the grid this will be a little bit easier to work with okay the next property we're gonna be adding is one that's called object position so we want our objects to be positioned at 50% and 50% and what that means is that let's say for example this image right here is you know look it's probably a landscape photo but I don't want the top left of the photo I want the center center to be right in the middle so if images are bigger or smaller you can see as I resize here the focal point is going to be the center of the image and that's what that object position 50% 50% is doing for us instead of the default top left so that's much better for your images okay the next thing we're going to add here now that we have in our box or our object position is we're gonna change the cursor cursor to a pointer and this will enable so when we hover over this we get the pointer so they can see it you know maybe I want to click on that how to do something when I click on it and then we'll also add a little bit of an animation so we are going to set up a transition so we're gonna say transition and it's going to be 0.5 seconds so I'm going to do an ease in out so the animation will take about a half of a second and let's go ahead and set up that animation on hover so we'll do that right next so we're gonna say dock gallery item and hover so when I'm hovering over the gallery item we're gonna change the image itself and we're gonna set up a transform and we're gonna scale this guy 1.5 so now if we hover you can see what's happening so over half of a second it's going to scale up one and a half times so kind of like a hundred and fifty percent you've gotta think of it that way and there we go so now we have a little bit of animation on the hover and that's looking pretty good okay now let's play around with this text so we want this text also - when I hover slide down and cover the middle of the image so we're gonna work on that little bit next so let's just go ahead and set up a little bit of a position here so we're gonna do a rule for gallery - item and then that remember that's in that div called text so our text right here so there's our gallery item and it's the wrapper and then here's this div called text so we can do a span here ahead hour three or I don't know whatever tag you on I just did divs to make it simple but you may want to add you know HTML tags that are a little bit more semantic in your code okay so we are first going to set the opacity to zero in other words they're going to be invisible by default so I'm not gonna see them until I hover on top of this so that's what opacity zero does and I'm actually just gonna set this to one for now so you can see them I'll set it back to zero here in a minute and then position we're gonna make these guys absolutely positioned and we're going to set the top to 50% and the left to 50% whoops and you can see in a minute here if I can type this correctly what this is going to do i misspelled absolute everyo absolute so that you can see now the labels are all positioned in left and top 50% so they're all kind of in the middle of their wrappers okay and now we're gonna also set a transform so transform we're gonna translate them so translate we're gonna set this to negative 50% comma negative 50% God and now I spelled that well translate there we go so now this is one that was a little bit trickier to see but now you can see that the element I'm actually gonna just invalidate this so you can see this you can see that the top left of the word people over here may zoom in a bunch the top left of the word people is at 50% left and top 50% but the word people runs all the way over to the right so it's actually not in the true center so by adding this transform translate I'm sliding it backwards 50% and now you can see that the word people is actually in the center center of the wrapping div so that's what that did for us okay let's set the color to white so that we can actually see these guys and also we'll just crank up the font size to something like I don't know 25 pixels or something whatever makes you happy so now I can kind of see those labels are residing over in the middle of all of those little tags so that's looking pretty nice okay next we're gonna set pointer events pointer - events to none and what this means is our text is not going to be able to receive pointer events or click so it won't interfere with the clicks of the element that's above it and now we can set our z-index we're just going to set the z-index to something like 4 that's gonna make sure that the text is in front of the end of the image when we start to do some position in an animating here in a second okay let's also set up a transition here so we're going to set this guy to have a transition point 3 seconds and we're just going to do the same ease and out for the transition here so once we do an animation that will be the transition okay now let's go ahead and do the hover so when I hover on this image I want this text to also animate so let's do that so it's gonna be duck gallery - item hover only this one is going to be affecting the dot text all right and let's go ahead and change a few things so opacity we want to change to one remember it's right now it's a Z it's at 1 so we're gonna change this back to zero so it's hidden by default and when I hover on top of this image opacity fades into two one you can see that happening there so that's pretty nice now you could leave it just like this I don't mind this it's kind of a nice little effect but I also want to animate it down so we are going to do a couple of other things here and we're gonna change we're gonna add a property called animation just to show you how this works and so we're gonna I'm gonna set up the name so the name of my animation is moved down it's gonna be point three seconds and it's just gonna behave in a linear fashion okay so now let's add a little bit of padding around this and you'll see what the padding is gonna do in one minute but I'm gonna add some blur along that text and the padding is gonna help to separate the text from that background blur and we're gonna set width of 100% now I'm just gonna temporarily turn on an outline so you can see this outline two pixels solid red we'll say and as we hover over this you can see that little outline there where that actual label is coming from okay you can kind of see that so now what I want to do is and you can see the actual red border is wider than the actual div and that's because we're scaling that image up and so the the border is going from the outside the outside after the transformation is applied which is kind of interesting so let's now go ahead and add this animation property right here so we called it move down okay so I'm gonna turn this opacity back on here so you can see this entire thing happen and then we'll go change these values so let's go ahead and write our animation so the animation is going to be I'm going to say add keyframes and then here's where we declare our name or we use the name we declared earlier move down remember this can be any name I could call this Andrew I could call this whatever I want you declare whatever name you want for your keyframe animations so at 0% I want this top to be at 10% okay and I'm just gonna copy this rule and paste a couple of times at 50% I want the top to be at 35% let's say and finally at 100% I want the top to be at 50% meaning it's gonna be halfway down so now when we hover over here you can see that animation happening so 0% it's going to be at 10% meaning from the top 50% it'll be 35% and it ends when the animation is complete we need a hundred percent of the animation is done the top position of that label will be at 50% which is halfway down and you can kind of see how that animation now works so now what I want to do is I can come in here and get rid of the outline and I can then come in here and turn the opacity to zero by default so now we kind of have this effect to where I hover over I turn on the opacity animate it in and hover it down and that's kind of what we're doing so the last little thing we're going to add to our animation on our text is a real cool property it's really new so it's not supported in all web browsers in fact it doesn't work in Firefox which is kind of a surprise to me it works in Safari and Chrome I believe but it is called a backdrop filter so this is kind of a new cool thing that allows you to play backdrop filters so we're gonna add this directly on our text right here so I'm going to do a prefix for this because you probably still need a prefix in most browsers for this so you can see it's right there WebKit prefix for the backdrop filter and I'm gonna say blur set to 5 pixels and I'll set saturate to 1.8 now I'll do a video eventually in the future all about backdrop filter so I'm not going to explain it here we're just gonna use it and then I'm also just gonna do the non prefixed version so I'll just copy this rule paste it right here and just get rid of the prefix altogether for browsers that don't need a prefix okay now you can see what happens right here right away when I hover but what that does is it blurs the background element in on the actual text silence oh it's kind of hard to explain you can definitely see what it's doing here so it's adding a bit of a blur only on a specific area of the image which is pretty cool okay now what we're going to do is add some more CSS grid to make this thing much more interesting right now it's just a simple you know a row and column and it lines out just in a box so we're gonna now add in some cool CSS grid stuff to make these things start to stretch and grow and be all sorts of different sizes so they look sort of like a masonry style layout so let's now cruise up here I guess we're just gonna keep going right here with our CSS and right above our keyframes I'll leave this sort of towards the end in fact I'm gonna return that out of the road so it's not so busy okay so now let's add in a bit of widths and Heights so what you can do is I'm just gonna illustrate this in a single grid item so I'm gonna come over here to my grid gallery and I'm gonna come to a it doesn't really matter which one of these I'm just gonna pick one and I'm gonna add in a a span essentially it's kind of like a tables fan but on this gallery container element I'm gonna give this one maybe a class of and I don't even know what to call these things we're just gonna maybe say width we're gonna call this one dot or W one width one in fact I'll call this one with three just to start off and show you okay so this one has a class of width three now what I can do is I can come over here to my CSS and I can write a new class called W dash 3 to correspond to that class and I can use this property called grid - column now this grid column property again I'm not going to explain you can watch the other video tutorial to learn about this but you can declare some values in here so what I can do is say span 3 so in other words that's kind of like saying I want that specific grid item to span three columns and you can see right away it does so that first element automatically spans three and the rest of the grid because we have auto flow set up just automatically reflows into a different structure so very very cool so what would want to do then is because I want to make my website fully dynamic meaning I can set this w3 to any value I want w5w one I want to set up a bunch of CSS rules that will allow me to build a dynamic gallery based on whatever width and height they want so what I can do here is I'm just gonna copy this and just paste it a bunch of times maybe we're gonna go up to six because we have six columns so I'll say with one two three four five six on the last one and you can see I'm just going to do these the same span one span two three span fours and five span six so now what this allows me to do is I can just come to any one of my grid items and give it a simple class of w-4 and boom it's gonna span four rows or rather four columns however you want so let's maybe just come down to this one and do a test so this one let's say W - - and it's save and sure enough that one's spanning three thousands now spanning two and it's just kind of all dynamic like that I can you know come down aways and let's say I want this one down here to be W - v a really really big one and you can kind of see how that's now refloating so this element is now spanning with five papers I'm going to undo that and back up a little bit okay now we have all of the ability to span columns but we're also going to set up the ability to span rows so let's come back to our CSS and I'm gonna do this slow again so we'll just start off with one let's do a rule in here called H - - so this is height in other words so maybe I want the height to span two so for these it's just the exact opposite I can say grid - row I'm gonna say span - and you can see what this is gonna do obviously so I'm gonna come over here to my grid gallery let's come up to this same first one that we set the width three two and say also have a height of 2 so H - 2 and refresh and you can see now this guy is spanning three columns and two rows and it's really big because the first row is 100 pixels remember in the second rose 300 pixels and this guy right here is spanning two columns in just a single row so you can kind of see how that can start to now you can interest them the add some variation to your gallery so let's come up here to my CSS and just the same thing we're gonna just copy and paste this two three four five six and we'll just rename these all one two three four five six and one two three four five six okay so by having these twelve CSS rules it allows me to just apply those in any arbitrary manner I want to all of my grid items and the grid will just automatically reflow so I'm just going to do this in sort of an arbitrary manner to show you two more properties we need to make this pretty slick so maybe this one I'm gonna say I don't know width 3 height 3 and we'll come down here aways and let's just give this one maybe a height 2 and whoops that's the end when I guess we'll come to this one and say width - 4 height - 1 and now let's save and refresh and you can kind of see here let me just pull this over how everything kind of starting to whoops reflow and interesting ways here and that's kind of the beauty of the CSS grid as things just naturally will flow around automatically let's take this one here that's like the third image let's go make a little adjustment over there so let's see that's one - that's this one right here let's make this guy have a height of 2 and refresh there so now it's got a height of two but you can kind of see right everything just kind of reflows around nice and easy so now what we want to do is we're going to add one more property here inside of our CSS grid whoops I keep snapping back over to make it so that our elements will sort of Auto if there's any gaps if we accidentally have any gaps in our gallery they'll automatically shrink so this property we need to add on our way up here on this element right here the property is called grid - Otto - flow and I can set this thing there's a couple other values here but I can set it to dents and what that does is it tries to fill in any holes if you have any holes for example if you had a element that's spanned its you know something and you ended up with a hole it will try to kind of shrink wrap the entire grid and fill in the holes so that's what that property does for you so that is kind of most of the code here for the gallery I suppose is now in place so you can see this is now fully responsive as far as the images are automatically resizing themselves you know according to their best fit they they automatically will Center themselves the labels are animating down and you have kind of a really cool gallery so the last thing we'll do is make a fully responsive set here so what we can do is let's just do a CSS rule here down at the very bottom above our keyframes for media query so we're gonna say at loops at media and we'll set this to be a I don't know a maximum width of 400 pixels or something just to illustrate like a smartphone so we'll just write a little media query here that says @media and this is just going to be for the screen and then we'll write our little conditional in here and we're gonna say a max width of I don't know 500 pixels or something like that and then we'll set up our media query so we're gonna overwrite the container because the container up here right is the one that actually has our grid property we're just going to overwrite this grid template columns and instead of six columns we'll just switch it to some other number so we're just gonna switch this to maybe I don't we'll just say two columns okay something like that so now you can see if over here in this preview it's a little bit easier to see so at full screen right I get all of my six columns and everything sort of reflows and as I get down below my media query watch write about you can see the value right here it's gonna snap when I go below 500 right there it just snapped and now I only have two columns in my overall grid so everything is refloating into the two columns instead of the six so that's how easy you can do a responsive menu so I'm going to show you one extra thing because there's a little bit of a problem we run into and we go all the way down to try to do a single column so inside of Firefox if you right-click and you say inspect element you can come in here to the inspector properties under layout and you can turn on this thing called the grid overlay so this is what I was talking about earlier in the video where if you turn on the grid overlay it will show you all of your grid and all of your grid line item numbers as well they'll also show you names if you have those set up in your grid template areas but I don't have that set up so what you can see is in full-screen here I have I'm going to go back to your the code really quick so you can see let's say I want to turn this into just a single column on mobile so if I come in here and refresh as I scale down so it's got seven seven seven so below or six columns rather below my 500 right here you can see it break and you can see the line numbers have they kind of changed they're pretty weird so they went from my six columns one two three four five six all the way down to this kind of a bunch that are over here invisible and then this three and four and five so you're kinda asking well what the heck's going on here so the problem is is that we still have rules set up for spans so some of my elements like the grid columns right they have like a span four so in my HTML I have an element that has a span four somewhere in here there's one with four right so it's trying to span four columns but my grid template columns properties only declaring a single column so right they're sort of in conflict if you will so what we can do to fix that is we can just add a little property in here basically a grouped selector for every single one of our width elements and just change them so the grid column has a span of one so no matter basically no matter what width I declared in a mobile media query they're just all going to span one column so once I save that and come over here and refresh you can see that automatically fixes that problem and now everything is down to a single column so I go from my full responsive right six column and then as soon as I hit that 500 breakpoint they all just now split into a single column all the way down so pretty nice a little way of sort of doing that and then they still are having their rows so the rows you know this may be spanning two or three rows and this one's right a hundred pixels that one's 300 pixels so the rows are still alternating one 300 one 300 with the corresponding height spans but the columns are automatically breaking down to a single column so anyway that little feature there is only inside a Firefox under these the X inspect element there when you turn on the grid overlays that can help you do some debugging or working with CSS grids so I hope you've enjoyed this tutorial don't forget to Like and subscribe to the channel so we can keep putting things out and we'll see you in the next one [Music]

Channel: FollowAndrew

Views: 31,420

Keywords: css, grid, gallery, tutorial, responsive, image gallery

Id: gvPyJ0rc944

Length: 39min 37sec (2377 seconds)

Published: Thu Feb 06 2020

Reddit Comments

[u/wilsmex]

Hi all, just finished a new tutorial covering responsive image gallery using CSS grid and a few other fancy CSS tips & tricks!