Responsive Image Gallery Layout using CSS Grid | HTML and CSS Tutorial

hello world who you here in in today's video we're going to be creating a responsive layout for an image gallery using CSS grid I also added some hover effects and as I mentioned this will be fully responsive so if we go into the responsive view you'll notice that my content is going to adjust based on the width now you see that I have a different layout and again as I keep decreasing it at about 600 pixels all my images are going to be stacking on top of each other so if you want to see more videos like this one please make sure you subscribe and turn on bow notifications I post videos every Sunday if you have any questions leave them in the comments down below and if you enjoyed the video and found it useful please give it a thumbs up also be sure to follow me on Instagram for weekly updates and I also have a patreon account so if you want to support me I'd appreciate it all the links are going to be in the description below now let's jump right in so for this particular project we only need two documents one is going to be for the HTML and the other one for the CSS you'll also notice that I have an images folder with 8 images I will include those in the description below if you use M it to create a boilerplate you can do it with an exclamation sign and then you hit tab now we can just go ahead and link to the style sheet we are going to be bringing in the eye on icons so we want to open up the browser and then we want to do a Google search for eye on icons and it's going to be the first one this is basically all the icons they have but to get the link for the CDN you have to go into usage and then you want to scroll down to the bottom of the page and grab this link right here this is also basic usage on how you can use the icons so now that we have that I can just close that and then I can paste it on top of my stylesheet now that we have everything we need I can just minimize this and make this smaller as well so that I can have my project side-by-side what we want to do now is go into the body and open up a div with the classical container then we want to open up another div with the class of image gallery inside of the image gallery div we want to have eight different anchor tags so since the other ones are going to be the same I'll just like do the markup for one and then I'll copy and paste it down below and slightly modify it so the first anchor tag is going to have the link actually before we do the link I have to give it a class which is going to be IMG one and now we can do the link this is not gonna matter right now but if you were to use one of those libraries such as the get dot J ass or lightbox J yes we're fancy box J s this would be ideal because it's already all set up to be able to work with it although we're not going to be doing that in this video we only want to focus on the layout so this one is going to be going into the images folder and what we want to pull is image one then we want to go inside of the anchor tag and we want to use the eye and we want to apply the class of icon we also want to apply a secondary class of eye on M D and then the icon name which is going to be expand and as you can see here now we have the icon and if we were to click on it it's gonna take us to that particular image the reason why you can't see an image right now is because we're going to be applying the thumbnails through background images in the CSS so now that we have the first one we can just go ahead and paste it down below seven more times so four five six seven and now we can go ahead and slightly modify it so the second one is going to be number two three then four five six seven and we actually need one more this one will be eight and we have to do the same thing for the classes so the second one is going to be IMG 2 3 4 5 6 and so on and this is going to be pretty much it for the HTML markup the next step is to go into the CSS and start styling it so as usual we're going to be doing a basic reset and it's going to be done on the margin we're going to set it to 0 then the padding and we want to set the box sizing to border box we also want to do it under before and after then what we want to do is select the HTML document and I'll use a font family of Roboto since it's a really good font and they fall back up sans-serif keep in mind that I already have this font installed in my computer which is why I don't need to use a link to import it then I'll use a font size of 10 pixels now I'll give the body some general styles mostly because I want to be able to Center my gallery right in the middle vertically and horizontally so if you were to use this in the real world or in real a real project you would have you would have to take into account for whichever particular container you're placing this gallery in so the body is going to be pretty simple I'll just give it a width of 100% any height of 100 of the pupil height I'm also going to be applying a background color of a light grey then I'll give it a display of flex now normally to Center this vertically horizontally you can do it with this play flex and then just use justify content as well as items but I'll be doing it by just giving the container a margin of ATO and that's going to Center it so now we can just go ahead and style the container and what we want to do here is give it a width of 100% as well and then we want to give it a max width of 120 ramp now as I mentioned to Center it we want to give it a margin of ATO then what we want to do is actually give it some padding left and right of 1.5 ramp now we can go ahead and style the image gallery div so we're going to target the image gallery and here we want to give it a display of grid then what we want to do is say grid template columns and we're since we're going to be having four we can just do one fraction each so we can do one fr1 far and then finally 1fr then we want to target the grid template rows and this we can just simply set it to auto now something else that we want to do is target the glitter grid template areas but before we do that I want to give a grid gap so we can just say that the grid gap is going to be 15 pixels so we can do 1.5 Ram and now we can set up the grid template areas but for now we're not gonna do anything because we still have to give each individual class for the anchor tags a name so for now I'll just comment this out and we'll come back to it in a bit so the next step for us would be to target the image gallery anchor tag and this would be general spawn styles that will apply to every single one of them as opposed to do it to doing basically the same thing on each an image item so this is going to be a lot easier because it will allow us to basically not repeat ourselves so we do image gallery a and here I just want to give it a width of 100% and now give it a height of 25 M then what I want to do is apply some background properties so the first one is going to be the background position which will be Center then the background repeat' is going to set to no repeat finally we want to say the background color of size will be set to cover we're also going to need a position of relative because we're going to be using position absolute on the pseudo-element will create later and we want it to be relative to this anchor tag then I want to make sure that I give it a position of flex because I want to align the icon right in the middle both horizontally and vertically so we'll do a display a flex and then align items center and then justify content center and that's going to be pretty much it for that right now the next step for us is to actually style the icon itself so we can do again image gallery a and then the I inside of it I want to make sure that I give it a lighter color so I'll do an RGBA of 255 255 which is going to be a white and then we can say that the transparency will be 0.6 so as you can see now we can barely see it but as soon as we do the images in the background color for the pseudo-element we're gonna be able to see them again what we want to do next is give it a font size actually since we can't see what it's going on now I'll just comment this out for now and then we'll continue with the styles so we'll do a font size of let's do three REM as you can see it also has a text decoration so let's go back here to the anchor tag and say text the creation will be set to none then what we want to do here is go underneath and I'll give it a position of relative then by the way the reason why I'm given a position of relative is because I want to use a C index on it just to make sure that this will sit on top of the pseudo element that we will be creating shortly so we can use AC index now and I'll just say something like a hundred I want to give it some padding top and bottom of one room and then three left and right once I do that I want to create a border so the border here will be two pixels and it's going to be solid rgba and this will be again a white and it's going to have the same transparency of 0.6 so that it is consistent and now as you can see you can barely see it the next step is for us to give it a border radius the border radius will be of 0.4 Ram then what I want to do is give it an opacity of zero because now we don't really want to see it so I'll give it an opacity of zero and then a transition which is going to be on the opacity as well of 0.5 seconds for now we still want to see it so I'll just give it I'll just comment this out for now and then later we can come back and um comment is when we're ready so now we're going to go ahead and create the pseudo element on the anchor tag so we can say before let's make sure we set the content to an empty string because if we don't it's not going to show up then I'll give it a position of absolute the width will be 100% and the height will be 100% as well then I'll get a top of zero and then a left of zero now I'll give it a background color and again it's going to be an RGBA because I want to see some transparency this time it's going to be black and the transparency it's going to be set at 0.8 and now we can kind of see better what's going on in the background so let's go ahead and uncomment this so as you can see now it matches better and we're going to be coming back to this in a bit so let's not worry about it for now after we have done the background color we want to set the opacity here to zero as well because we don't want to see it unless we hover over it finally we want to transition the opacity as well and it's going to be over 0.5 seconds so now what I'll do is just go ahead and uncomment this and then what I'll do is just create the hover effect that will show it once we hover over each item so the first one is going to be the image gallery and then we can say that a so when we hover over the anchor tag we want to show the icon that's inside of it and since these both share the same hover effect we can just use them both together be here so instead I'll use a comma to separate it and then here I'll target the image gallery a again and I want to say that when I hover it and then the before pseudo-element is going to get the following style which is going to be the opacity and we will set it to one so now as you can see when we hover over each item we get a nice hover effect with that out of the way we can go ahead and style each individual image so the first one that we want to target of course is going to be IMG one and what we want to do here is say great area and what we want to do now is just give it a name in this case I'll use the same class names so I mt1 then I'll give it a background image and we simply want to go into the images folder and we want to grab the image one we still can't see it yet because we still have to set this up right here as I mentioned Droog on the grid template areas but for now we'll just focus on this now the other ones are going to be the exact same thing so we can just copy and paste it down below and change it up so this one will be IMG - again we have to change the name for the grid area to match this one right here and we want to switch up the image as well then paste it down below again this one will be three three and then we want to switch the link those three as well then we want to do four and then we want to do four here as well and let me just double check something over here before I move on and yeah that looks right so we're gonna keep going down this one will be five and then this one will be six now this one will be seven and finally number eight so now that we have done that we can go ahead and start with the layout so this is going to be pretty simple we can just scroll back up and let's uncomment out this grid template areas so the layout from the demo had an image that would expand from here all the way down to the next row and the way we would do we're going to be doing that is by saying that the first item is going to be IMG one then the second one is going to be IMG two so that's going to be in position number two and then this one will be IMG three and then I am g3 as well this one should be three because we wanted to keep expanding then what we want to do is just copy this I'm actually going to give it a space down and then I can paste the next one and here like I mentioned we want this image to expand to going down so how we can do that is by saying keep in mind that we gave this a height of 25 per M so in order for this to take the next spot down we have to basically say that we want to double this so we also have to take into account the grid gap we have right here so it's going to be let me just scroll down to the first one right here we can say that we have to give a a min height of remember that we have to make it twice as big so we have it we had 25 RAM we have to save 50 RAM now but remember that I mentioned that you have to take into account for the grid gap as well so the grid gap is 0.1 point 5 gram so we can save 51 five RAM and as you can see it's now expanding to this one and this is going to look a lot better obviously on bigger screens we're going to be sorting that out in a bit by using media queries but for now let's just focus on the main layout so again let's go back to the top so that we can continue doing the grid template template areas and here what I'll say is for the second one we can do four then we can do five and finally we can do six as you notice before six is also going to expand too so we can take care of that shortly again let me just copy this paste it down below so that we can just simply go ahead and modify it as we need so for the third one we can say that it's going to be image 7 right here we wanted to expand too so I'll do 7 here as well and then this one is going to be 8 and this one can remain as 6 so as we did for this one right here we also have to do it over here for image 6 as well so let's just scroll down and find image 6 right here and we can say that again this one is going to have a min height of 51 0.5 RAM and this is going to be pretty much it for the first layout on larger screens now we will go and do media queries so that we can take care of how it looks on smaller devices so if I go into my responsive pew and else I'll basically scale this down until it lo no and no longer looks good so if we keep going I'll say that it looks right it looks just right here but I think it would look better if I changed it up so I'll say that at 900 pixels I want to change how it looks so let me just actually go back over here and let me make this smaller just so that we can kind of see what's going on better or actually since we need the room I'll just make this smaller keep us at and keep it as it is so remember that I said 900 pixels so we want to have a media query for that and we can say add media screen and then we can say and max width of 900 pixels what we want to do now is just go ahead and go back up and grab this portion right here from the image gallery and then go back down and select the image gallery and paste what we just copied inside of it so in here we just have to do some slight modifications the first one is going to be right here so we want to switch the two with IMG one because this time around we wanted to expand over here as well then this one will be number two then this one can still see the same can still stay the same because I wanted to keep expanding too and remember here we have to change it to one as well it's going to break the layout for now but it's going to get fixed as we keep switching up here the names then as for the five we can change it to three knots over here so you can see and then I wanted to expand too so right over here I can say it's going to be three as well then what I want to say is that I want to take on select image 4 and place it over here and I wanted to expand to as well then I'll select image 5 and I wanted to expand to as well so 5 & 5 now we need to grab at least 2 more because we have more images to style and what we'll do is just paste it down below over here and the reason why I did the space was just so that we didn't get confused with the layout that we just created for the previous 3 so now what I want to say is that this one will be 6 then we want image 7 right here and we wanted to expand 3 so we'll do the same here as well for image 7 then for the last one I want image 8 to expand the entire row or column in this case so what I'll do is 8 8 8 & 8 so now let's just get rid of the space and as you can see that looks a lot better but we have to reduce the height of this image because as you can see it's breaking the layout so let's just go back and under the image gallery we can go ahead and select the image gallery a-and what I'll do here is actually reduce the size of the height for the images in general from 25 ramp to 20 Ram then I'll select the image 1 and what I want to do here is basically do the same thing that I did for the one before remember that back then we had 25 so the total would be 50 1.5 ram in this situation since we changed it to 20 what we want to do is basically say that it's going to be 40 1.5 ram instead because we're taking away 10 Ram so for the min height we can say that it's going to be 40 1.5 Ram then what we want to do is select the image 6 and what we want to do here is just make it the same size as the images here in general since we did the styles on image 6 before right here it means that it's what we're writing the general styles so we have to select the image 6 again and we want to say that the min height will be 20 Ram just like the one we are one we have right here and now you see that the layout is working so if we go ahead go into the inspector and then the responsive view you'll see how it changes after it hits 900 pixels so if we keep going we can choose the next breakpoint in this situation I thought the best fit would be at 600 pixels so again let me just minimize this and we can go ahead and basically say that we want to grab this right here and we're gonna copy it down below actually we're just gonna copy it and then paste it down below and that's just gonna save us some time and we want to change the 900 to 600 and this is going to be pretty simple now because since this is going to be for the smaller devices we can just simply have the images expand the entire column so in this case I already have the IMG here so what we have to do is just make sure that it's going to be one all across we have to make sure that we do the same thing for the other ones so - and then for the third one now the fourth one and then the fifth one and now we still need three more so we can just go ahead and grab these right here and we can just paste it down below then this one will be six this one will be seven and finally this one will be eight and as you can see everything is now stacking on top of each other however I want to make sure that I reduce this height and make it the same as the rest of them and I also make the general styles for the images as far as the height goes bigger so here for the gallery items a I'll just take this and delete it and I can just simply add it to this right here so I'll do a comma and then I'll select the image one as well as the image six and what I want to do here is just increase this height to thirty and since we used a min height for the other ones I want to make sure that I also do a min height of thirty rep and now if I go ahead and make this bigger and we go into the inspector then the responsive view you'll be able to see let me just actually make this smaller so that we can see the whole thing you can actually see how the layout is changing based on the width of the device and this is basically how you create a simple layout using CSS grid and grid template areas so if you guys found this video useful and maybe you learn something new please make sure you give a thumbs up if you still haven't subscribed please hit the subscribe button and turn on permanent vacation so that you're notified whenever uploading your video I'll catch you guys in the next one

Channel: Julio Codes

Views: 72,245

Keywords: html, css, image gallery, image gallery css, image gallery in html, image galleryusing html and css, lightbox image gallery, lightbox image gallery html, lightbox gallery, image gallery tutorial, image gallery tutorial css, image gallery tutorial html, image gallery tutorial css and html, responsive image gallery html css, css grid, grid template areas, css grid layout, responsive web design, responsive website, responsive images css, photo gallery html css, how to create

Id: zgXHgKad7N0

Length: 32min 51sec (1971 seconds)

Published: Sun Nov 03 2019