How to Create an Image Grid Gallery - HTML, CSS Web Design Tutorial

hey guys how you going my name is dom and today i'm going to be showing you how to create this image grid right here using html and css grid okay now if you haven't used css grid before this video should hopefully help you out in terms of understanding how it all works so this solution right here is actually relatively straightforward okay now this grid is also going to be customizable which means you can actually change your width and height of the images for example we can see the one right here this large one this is taking up a total of two columns and two rows okay so you can change things like that to your own liking it's going to be totally up to you now it's also going to be responsive right here as we can see as i scroll down as i decrease the width of my page it's going to respond to of course the page size as well as go down to a more you know compact two-column layout on mobile devices okay so going inside this tab right here let's begin from scratch to create what i just showed you now also as usual the source code for this is going to be linked down below if you want to view it and follow along so going inside the text editor right here we're starting with an empty html file i've linked up this css style sheet so let's go inside the body and begin with the html before moving on to the css all right so when it comes to the html it's going to be really simple we're going to be creating a new div here with a class of image dash grid so this div is going to be the main container for each one of your images okay inside here now we can simply specify every single image for example i'm going to say image right here give this a source at this url i've just got a sample image of architecture at this url now i can put some else text for example architecture just like that so i'm going to duplicate this five times just to recreate what i've shown you in the example just earlier on so if i save this here and go back inside the browser we get something like this so this is all of the html done for the image grid it is that simple okay now going inside the css right here let's get to the main parts okay so we're going to be setting a body here with a margin of 0. so this is optional the only reason why you'd want to do this is if you want your image grid to take up the entire width and height of your browser so by default of course there's about a 5 pixel margin on many browsers in the body so we're just getting rid of that if you plan to put your image grid inside a different part of your web page then this of course isn't required so down here now we can target the image dash grid class so for the main class right here we're going to be setting a bunch of css properties so we're going to say dash dash then say gap at 16 16px so if we're familiar with variables in programming languages basically this is just setting a variable which we can then use later on so the reason why i've set it as a variable is so that we can reuse the same value in both some padding as well as a gap okay so let's move on now set another one called dash dash num dash calls make this four so basically number of columns in the grid is going to be 4 by default and if i didn't mention earlier the gap is going to be basically the gap between each photo 16 px okay down below we can now say dash dash row dash height going to set this to be 300 px okay so essentially here we're just saying each row or each image is going to have a height of 300 pixels okay now going down we can say a box sizing of border box then we can say a padding of var and use that gap right there so a padding of 16 px basically so the border sorry the um the border box here is going to make sure that the padding does not increase the entire width of the container so if i just save this here go back in the browser we get something like this as we can see we've got that 16px of padding on each side of the image grid container right there okay now moving moving down we can create a new property here called display and make this equal to grid so using the grid display on css or on the container to of course take advantage of the css grid so when it comes to the css grid we're going to be specifying some columns and rows so here i'm going to say grid template columns i'm going to set this to be repeat then say var and use that number of columns then say one fr so basically this just means that for the columns on the grid we want four so four four equal width columns on the grid okay then down here we can say grid auto rows and make this equal to the row height so basically this just means this grid auto rose this means we want an unlimited amount of 300 pixel rows in the grid okay so if i save this here go back inside the browser we can see we get something like this so it isn't looking exactly how we want it but if we go over the grid here we can see if i just see this we have our three sorry our 300 pixel right there you can see it the 300 pixel height on each one of our grid items okay now we need to just simply fix this thing where the images are taking up the entire you know width and height of whatever they want to be so to fix that go back inside here i just want to also set a gap using the same gap variable of 16px so now this just this just creates a 16px gap between each image save this back in the browser and we get a gap right there which you can't currently see there it is but we're going to fix these overly large images so we need to basically tell the images to take up the entire width and height of their grid cell so back down here we can say image dash grid and target each image img then we can say a width of 100 and a height of 100 percent so now if we save this back in the browser we get this right here it is now working perfectly fine so you just need to set that width and height on the image to basically constrain it to its container or in this case it's grid cell so we've got the grid working okay so of course our four columns there and the 300 pixel rows now the problem is of course the images are being condensed down and they look a bit funny so to fix that go back inside here we're going to say object fit and make this cover save this here and now basically the images are going to maintain their aspect ratio as you resize them which of course is going to help you with the responsiveness of your you know solution okay so there we go next up we're going to be taking a look at uh just creating or making this support mobile devices so a screens more than something like 1024px so going back inside the css this is also a benefit of using the properties up here so basically i'm going to hop down here and we're going to be setting a media query so we're going to be basically saying when the screen is less than two four px so a smaller device we're going to change our columns variable here to be two instead of four okay we're also going to be changing the row height so going down here we're going to say at media screen then say and max width is equal to 102 for px so basically anything under so anything under 102 for px i'm going to say inside here targeting the image dash grid we're going to simply change those variables so we can say here num calls is now equal to 2 then say row height is now equal to 200 px save this back in the browser and we have this right here upon going down less than one zero two four we can see that it changes to a two column layout and the height also adjusts to be a bit smaller so now of course on your small devices it's going to look okay of course you can change this you can make it a single column if you want to but that's going to be up to you so the last step now is going to be to support where essentially a single image can take up more space so to achieve that going back inside here we're going to be uh just creating some helper classes so down here i'm going to target the class of image dash grid dash coles sorry col then two so basically if your image in the html if your image here has the class of image grid col 2 we want the image to take up two columns okay so we can say grid dash column and make this span then two so it's quite self-explanatory for this individual cell or item we're going to say make it span two columns do the exact same thing this time making this row so row image grid row and make this grid row so of course this time talking about vertically taking up two rows save this then in the html let's make the first image here take up those two columns we can say class i make this image image dash what was it image just grid dash call dash 2 here image grid cult there we go perfect save this back in the browser and now it takes up two columns perfect right but now let's make it take up two rows back inside here add the class of image grid this time row then to save it back in the browser and it takes up your two rows so that is how to create a css or html and css image grid if today's video helped you out drop a like and subscribe and i'll see you guys in the next video

Channel: dcode

Views: 8,384

Keywords: html css tutorial, css3 grid tutorial, css3 grid, css grid, how to use css grid, how to create css grid layout, html css page layout tutorial, html css image gallery tutorial, html css photo gallery tutorial, website photo gallery tutorial, how to create a photo gallery for websites, how to build an image gallery for websites, responsive image gallery tutorial for websites, mobile friendly image gallery

Id: rnhoY5Cdmy0

Length: 10min 49sec (649 seconds)

Published: Tue Aug 03 2021