CSS Grid Tutorial: Responsive Card Design

hey I'm hunter from skill thrive and in this video you'll learn how to create this responsive card layout using CSS grid so to get started on this project we're going to be jumping into terminal to create the for and files that we need for this project so right now you can see by this little tilde that I'm in my root directory so if i type LS which means list you'll see all the other directories in my root and i want this project to live on my desktop so I'll do CD which is change directory start typing desktop and I don't have to type it all I just type a little bit and I can hit tab to autocomplete and then hit return to go into my desktop now if I type LS again you'll see these two files here printing which are the ones that are over here on the right so let's go ahead and make a new folder by doing make a dirt or make a directory and we'll go ahead and call this CSS grid card layout then we can CD or change directories into that and now we want to use the touch command to create two files one being index.html and the others being styles dot CSS so if we LS that and list those items you can see those two printing to the terminal then what we can do is use the code command which is one that comes with visual studio code and if you're using a Mac this isn't going to work out of the box you do have to set something up in Visual Studio code but I'll be sure to link that below so you can easily do that don't worry it's super simple so then we'll hit return and this will open up a visual studio code project so let's go to get an exit out of that welcome screen I'm going to come down here to the extensions and talk about live server which is what we're going to be using in this course in order to create a development local server that also has live reload features so once you have that installed you just click on this button - uninstall Euler's we'll say install we can come back to our project open up our index.html and by default Visual Studio code has Emmitt installed and Emmitt comes with some handy tools to make writing code faster and one of those is with boiler plates now boiler plate is this really it's just starter code code that you know if you're writing an HTML document of your HTML Docs and what you can do is you can write Exim Asian point in this little command or comment comes up and you can click here and it inserts some boiler plate and what you can do is go ahead and just change the title here to something a little more descriptive and then we need to pull in our stylesheet and next up we want to pull in the Google font and we're going to be using which is open sans so I'm going to come into Google here go to fonts Google calm up here I'm going to type open sans click here to add that to my selection expand this little window come in to customize and make sure that we just have regular 400 checked come back in to embed copy this link here or this link tag come back into my header and then paste that here and then save that all right so that's basically everything for the the actual heading part of this we want to come now into the body and start writing our HTML the first I'm going to do is just create a main tag here and in here is going to be a section and this section is going to have a class called cards and in here we want to have a new div and this is going to have a class equal to card and in here the first thing you want to do is create another div and this is going to be the card image container and what's cool about this container is it's going to essentially act like a mask for the image now you won't see any of this in the HTML part this is what we're going to be doing and the CSS let's go ahead and just continue here and pull in an image and I'm gonna pull this image in right from unsplash so let's come into unsplash here type in unsplash.com search for an image here I'll just do a mountain I'll find a mountain image that I like so this one's nice I can say open image and new tab and in this URL you can see the width here is 1350 so let's go ahead and set that to 1200 and then I'm going to copy this URL come back into my project and then paste it here into the source and then go ahead and close off that image tag so now that we have some actual content in here let's go ahead and beat up live server so we can see this in real time so we'll come into index.html hover over it and then say open with live server now it's going to open this in our default browser but we can copy this URL up here and I'm actually going to be using Firefox because Firefox has some really nice dev tools for CSS grid so let's come up here and then paste that in and we just go ahead and just close out of chrome because we don't need this anymore and I'm going to come over here and just move this over to the left and then move this code over to the right so we can see both of these items then we can click here to collapse that menu and continue writing our code so after the card image container we want to create another div and this div is going to have a class of card content and in this we're going to have AP tag giving this a class of card title and also passing in a reusable style here called text medium and we go ahead and write a title here for our card and underneath this P tag we're creating another div and this div is going to have a class called card info so this is still in the card content div and in here we'll have a P tag giving this a class of text to medium and this is going to be the the length of the class of 30 minutes then it's going to just copy this P tag paste this below and we'll keep the text medium but we actually want to add another class here called card price and a price on this one because I'm a generous person is free so we save that we can see all the content now here in our project and this is basically everything we need to do in order to start styling this card so in order to style we need to come into our styles.css file here and the first thing I'm going to do is just add some resets and to do that we can do asterisks which applies it to everything we can first set box-sizing to border-box and i've gone over what this is but just to spare you the details I will link a really awesome article for you to read over in the details or in the description below so you can learn more about what this is actually doing but essentially what it's doing is it's making sure that margin and padding are acting like we want them to so more on that in the description below but let's go ahead and just read set padding and margin to zero if we say that you can see everything now is is reset then we can go ahead and set a background color here on our body through the following hex code next up we want to go ahead and define the the actual grit and we're going to do that on the main tag and first we need to say we want to use grid by saying display grid and then we'll define grid template columns and what I'm going to do is the first column is going to have a value of 1 fr now fr is a unit that we're able to use in grid and it's a calculated unit and let's say for instance we wanted 3 equal columns and these columns are going to have different sizes so what we can do is one fr when fr went too far so now we would have three columns in that state for instance we wanted this second column to be twice as big we could use something like two fr now this one is three columns but the one in the middle is twice as big as the two on the left and right so one of our is a really cool useful way or unit that we can use in order to write some different sizings here and also just create responsive grids and these are going to act as like white space for my grid and in between them are actually going to be the twelve columns that we're going to be using to put our content in now the reason I like to do this is let's say for instance we had a section that we wanted to expand full width we can easily just tell it to fill up 14 columns instead of the 12 now let's go ahead and just create the 12 here that's going to hold most of our content by writing repeats we want to repeat this 12 times want to set a min/max here and Men is going to be set to auto so this value is going to be calculated and the max value is going to be 60 pixels now let's go ahead and save that and go ahead and set a grid gap here as well this is this going to be spacing between the columns and rows so before we move on I do want to talk about this min Max value again now the minimum that this could ever be is Auto and the maximum is 60 pixels now where am I getting 60 well 60 is a value of the maximum that I want to create so 12 times 60 let's go and open up our calculator so you can see that a little easier so 12 times 60 it's going to be 720 now 720 is the max here but we also have a great gap there's 40 pixels between each of these so 40 times 11 Plus that 720 is going to give us a max value of these Center twelve columns to 11 60 so our content is never going to be bigger than 11 60 and that's the reason I like to do it like this because once we are smaller than 11 60 that value is this going to be Auto so the 60 columns for the pic the 60 pixels that are set to the largest column is this going to be calculated by this min max all right so now we have grid gap set let's go ahead and just add some padding so it has some breathing room on the top so do 60 pixels on the top and then a zero on the left and right and that's go ahead and now and just add that text medium style that we're going to be reusing and this is going to have a font family of open sans with a back a fall-off of sans-serif go ahead and set the font size here line height font weight and the color Larry so now you can see those that text has now changed to open sans the this font the size the family the color have all changed because we passed in that text medium so now let's go ahead and move on to the cards and the cards we can defined how where that should take up so remember that we created technically fourteen columns and then in the middle we have twelve so what we can do is we can say grid column and we could do grid columns start and also grid column in to do this but the shorthand is this grid column and we want this to start on the second row or the second column so it's it's not starting on this one this is going to be the white space and it's starting at the first column here on our twelve and what we want to do is we want this to span twelve columns so now you can see that that shifted over if we come in and inspect this element you can see in a firefox there's this really cool functionality to select the grid and then you can see the grid all the time once you are off this element so you can see the twelve columns in the first column is you know this isn't taking it up because it's we told it to ignore the first column and not start there we told it to start on the second and now let's we you know we still have some work here to do and one of the things we need to do is actually have display on this as well now remember the cards is a child of this main or yes the cards is a child of the main so once we set the the grid here the cards only cares about that you know the individual card doesn't care about the grid on main it cares about what the parent of it it wants so we need to set display grid on here as well so that's why we do display grid again and let's go ahead and copy this grid typical template columns paste it down here and on this one I don't want the 1fr I just want the twelve columns so we'll just go ahead and have that there you can see if we select this grid you can see the the cards now has 12 columns now it's not the width isn't correct because we still need to add a grid gap so let's go ahead and do grid gap and then set that to 40 pixels so now you can see that is the correct width which is the same as this one up here the center 12 let's go ahead and just select this main one again so we can see that grid and now that we have grid on our cards parent as well we can actually define how big we want the individual card to be so to do that we do grid column end and we just want this to span four columns so if we save that the image isn't going to resize because we still have some work to do on that but you'll see that these now span four columns so one two three and four and now we can use display flex on this and if we save that you'll see now that it's going to move over here because that's the default value with Flex but we can change that by setting Flex direction to column and now it's going to revert back to up-and-down and I'm going to do just set a background color here to a hex code and we also want the cursor to be pointer so once we hover over this it changes to the pointer which indicates that it's clickable and we also want to add a transition here and this transition is going to be important for the hover pseudo-class but we're just going ahead and apply this to all the things that are changing on our hover it's going to be a 0.3 second animation the motion is going to be ease in the delay is going to be 0 seconds so that's everything for the card I'm actually gonna come back and do the card hover later because right now the card isn't styled correctly so let's go ahead and just move on to the card image container and I said earlier that this is going to act essentially like a mask would for in like Photoshop or other programs and it's going to hide the image and it's also going to be in a specific aspect ratio now if you're not familiar with at the idea of an aspect ratio I'm sure you're familiar with the idea of a 1080 video right at an HD video and the size of a 1080 video is 1920 so that's the width and then 1080 and that aspect ratio is 16 by 9 and we want to recreate that because the video thumbnails that I create are in that ratio size so first we need to set the width here just 100% so we're saying this container needs to take up a hundred percent of the parent that it's in which is the card class and then it has this really cool people call it a hack but it's really not hack it's it's just it's legitimate you know CSS and what you can do here is you can set a pattern padding top to a percentage of the aspect ratio so let's go ahead just come into the calculator and show you how that's calculated so if 6 16 by 9 or 16 / 9 aspect ratio if we first divide 9 divided by 16 and then multiply that by 100 we get 50 6.25 cent so if we go ahead and set that here 250 6.25% this is now going to have an aspect ratio here if we hover over this of 16 by 9 now right leg again we still have to do some stuff and work on the actual image but there are a few things we need to still do here on our container and one of them is to add overflow to hidden and once we save that you'll see the image is now hidden everything that's overflowing of the parent is now hidden which is going to give us that masking effect and we also need to set position to relative and this allows us to set position to absolute on our image so let's go ahead and move on to our image here and this is also going to take up 100% so you can see that has now resized and we need to set position to absolute and it disappears because we haven't taught it where it needs to go and the next code that we're going to write is essentially important because it's going to Center the image now the reason I'm doing this now I usually create like I said the images always in sixteen by nine but let's say for instance I had an image that liked this image that we're using is not in sixteen by nine ratio what this is going to do is it's going to Center it regardless of the aspect ratio and the way we do this with absolute positioning is first setting a top position to fifty percent and also a left position to fifty percent if we save that you'll see in this card image that the image like this left side the left top side is in the center of that container and what we can do is use transform to move that over fifty percent on the X&Y axis so we do transform translate and the first value is negative fifty percent and the y-value is the same thing so negative fifty percent if I can remember where the percentage sign is there we go so if we say that you'll now see that this is centered in this column and it's also a sixteen by nine ratio so we come in and actually look at the image you can see on the top and bottom that there is an equal proportion that overhangs and is hidden from this container and this is this a really nice flexible way to handle images of different sizes in your design alright so that was a lot to cover there in that section but the rest of its pretty straightforward the next part we need to design is the card content so we'll do card content and on this we're just adding some padding all the way around the edges so this gives a little more breathing room here for our text and now what we can do is we can move on to the card title and the card title is also just going to have some breathing room at the bottom so margin bottom is gonna be set to 20 pixels the next thing we're going to do is move on to the card info so let's do card info and this is going to have display flex so now you can see those are now left and right of each other and before we move on and add the rest of the card info I'm just going to style the card price and what we're going to do here is we're going to first set margin left to auto what's cool about this is by doing this because we're using flex it's just going to move this item all the way over to the right so it's kind of like a way to handle floats so if you save that you'll see that that has now moved all the way over to the right now we want this to kind of look like a button so what we want to do is add some padding here of 5 pixels and 20 pixels with a background color as well so if we save that you can now see that background color but the edges are still squared off so what we can do is use border-radius to round those off so what is 220 pixels so those are nice and round alright so now what we want to do is come back to I'm actually going to unselect this main grid so it's a little easier to see we'll come back into the card info and I'm going to do align self to end and that's just going to ensure that once you know if this gets taller that this is going to be always at the bottom of this display grid the next thing we want to do is Center this 30 minutes on this free button now right now it might not look like it's too far from center but we can make sure that it is centered by doing a line items and then setting that to Center and now you can see that 30 minutes is now centered nicely on this free card price button alright so now what we want to do is now that our Dino design is it looks right let's go ahead and add that hover effect over on our card so let's come back and scroll up and we'll target the card and then hover and this is going to be just a really simple transform on the translate Y of just negative 7 so it's going to move it up 7 pixels and because we added that transition here of 0.3 'yes it's gonna be a nice smooth motion once we hover over that alright so now we have the pretty much the design done it's just not responsive I mean it's responsive in the sense of you know it resizes but we want to change how much space it takes up based off this the the size of the screen so what we want to do is we want to come down here and start writing some media queries and to write a media query do at media we want this to be based off of the screen and it's going to initialize once max-width hits a thousand pixels and we want to change something here and what we want to change is the card and what do we want to change in the card we want to change how much space it takes up so we do crib column in which is how we defined it in up here so we said grid column and span for now we want it to take up half the space and this is a twelve column layout so we'll do span six to take up half the space now once we resize this you'll see it jumps up to this size all right so now we still have a couple more media queries to write here and the next one we want is going to happen at 700 pixels so we do 700 and we also we want to change grid column in here to do span 12 so it's going to span the full width so let's go ahead and save that and we resize this you can see that has moved down now you'll see like once we move over that this this starts to break and the reason it's breaking is up here it's still basing everything off of this size and essentially you know Auto gets smaller and smaller and smaller but 40 pixels is consistent so this forty pixels is still calculated in the overall width so what what we can do to fix them this issue is to just make the grid gap smaller so let's come up here and right in the main we can just make great gap 20 pixels so now that looks a lot nicer but we still gonna have an issue here where it starts to become another problem and we're going to fix that with another media query so let's write a media query here and this one's going to target at 500 pixels and it's going to change a couple more things and the first thing we want to do is we want to change the grid template column so I'm going to come into grid template columns and just change out our entire column so it's not going to be 12 anymore I'm going to force 10 pixels on the left I'm going to do repeat but this time it's going to do six columns and I'm going to use the 1fr so they're going to be calculated equal size columns in there and then on the right I'm going to have 10 pixels as well and then grid gap I'm going to drop this to 10 as well and I'm also going to resize the cards grid so come into cards do great a column again we want this to skip this first column so it's going to start on two because this is now six columns here we want it to span six and then we want to also change the columns here so grid template columns repeat six columns that are equal sizes and last we wanted to change the grid gap here to 20 pixels and on here we want this because the max width is going to be 6 we don't need it to span 12 because that doesn't exist it needs to span 6 all right so now that we save that we let's go ahead and just check this out and it looks like something isn't coming through correctly so let me just take one more look here at this code and make sure I have this written right and on further investigation I have this set to grid column end it needs to be grid column which is the shorthand method we want it to start on 2 which is grade column start in grid column and it's going to be span 6 so once we change that and save it you can see that our design it actually looks correct now so on really small screens we have 10 pixels on the left and right and it takes the remaining 6 columns of space and that's we make this bigger you can see the card gets bigger now let's go ahead and just duplicate this a couple times so I'm just going to come in here into the card here and there's duplicate this like 8 times now this isn't what I'm doing and like I'm not hard coding this on my personal site I'm using react I'm using some more you know programming and and and gasping contentful to get all this to pull in but just for the sake of showing you how this works on the responsiveness let's go to this resize this you can see how everything nicely resize even on really really tiny screens and there you go now you've designed your own card layout using CSS grid if you liked this video and found it helpful please give it a thumbs up and consider subscribing and be sure to check out our other design and coding tutorials on scope very calm and on our youtube channel again i'm hundred from scott rive i'll see you in the next one

Channel: Skillthrive

Views: 26,035

Keywords: responsive web design tutorial step by step, responsive web design tutorial 2019, web design, web development, css grid, responsive web design tutorial, responsive web design, css grid layout, css grid tutorial, css grids, css responsive grid, css tutorial, grid css, css grid responsive, css cards, responsive grid, html and css, flex grid, html css responsive design

Id: qJf8N46OEMk

Length: 29min 40sec (1780 seconds)

Published: Fri Sep 13 2019