Master CSS Grid | build 5 CSS Grid Layouts 🔥 | Beginner - Master level | Responsive Design |CSS Grid

hey there guys you're watching codelab welcome to another css grid tutorial and in this video we're going to be utilizing the power of css grid and building five different layouts ranging from beginner to master so by the end of this tutorial you guys will be confident enough to use css grid in your next projects and as always if you guys enjoy the content please show your support by hitting the like button and subscribing to the channel and make sure you turn on notifications as i post weekly content so you guys never miss an update so to our right in the browser i'm just going to go over the five layouts we're going to be creating in this tutorial so we're going to start off with the beginner level here and uh this is pretty much as simple as it gets for layouts um and this can sometimes be referred to as the pancake design because we have three sections here a header main content and a foot art and they're stacking on top of each other kind of like a pancake but again this is as simple as it gets for layouts and it's really simple to create now if we scroll down to the next level we have the beginner plus level um so again this is pretty similar to the pancake design it's almost like a sideways version we've got three sections a nav a main and a blog section here but the key difference in making this layout is we're going to be using the 12 column grid system layout which is a really powerful system and helping create cool layouts and then for the third level we're just going to be up in the ante a little bit to the intermediate level and in this section we're going to be using again the 12 column grid system but we're going to be making this whole thing responsive so currently right now we're looking at mobile screen sizes and if i grab the browser and get to let's say tablet sizes you see the layout changes it becomes more responsive and then if we get to even bigger screen sizes so desktop sizes the layout changes again and again shows the responsiveness and just really shows the powerfulness of the 12 um column grid system so i'm just going to shrink this down again to get to mobile size and then now for the next level which is the pro level again we're going to be using the 12 column grid system here but to lay this out we're going to be using the grid template areas so again we're looking at the mobile first and then if we make this bigger you see the layout changes on tablet and then if we go to desktop allow changes again so again another really powerful way of creating layouts and css grid using grid template areas now for the last section um which is the master level here you can see in this section we've got a couple of cards for different simpsons characters now we're using css grid to lay this out but the real magic of this layout lies in the fact that we don't need to use media queries to make this responsive so let's just grab the browser now so we're looking at mobile screen sizes um so they're just stacking on top of each other make the um screen size bigger to let's say a tablet you see now um it can fit two cards on one line and then if we get even bigger to desktop it could fit three and if we just keep going it'll eventually fit all of the cards in one line again this is achieved using only one line of code so without wasting any more time let's start creating these layouts so i'm just going to bring this down to mobile view again and we're going to work on this blank index file here so i'm going to go inside the body and we're going to create the first layout and this is just going to be a div with the class of beginner and then we can have three boxes in here so box one and duplicate this a couple more times uh so box two and then give this class of box three so of course first box is gonna be for the header second box is going to be for the main content and then for the last box it's just going to be for the footer so really simple and then let's just open this up with live server so we have a blank document now inside the style sheet here i'm just going to create some global styles so i'm going to remove all the margin and i'm also going to remove all the padding to zero and the box size in shadow box sizing to border box and then what i'm going to do is just increase the font size uh for all the elements 230 pixels and then underneath this uh we're going to use square brackets and we're going to grab the divs which all have the class of uh box dash so all the divs are going to have this class of box dash so we want to target all of them so they have the same styling so to do that we need the square brackets and then we're going to need a selector here and we're going to select all the classes that have the box dash and now this will select all of these classes which is just going to be all the boxes and we can add some styling in here now so for these boxes i want them to display grid and i want to place the items uh to the center so this will basically just put all the text to the center of all the boxes um and then let's just give these guys a border so solid five pixels orange red and then let's just give them some padding um of about 10 pixels uh some border radius about 20 pixels and then let's also just give them some box shadow so uh box shadow zero on the x and y and then five pixels blur and then let's just give them an rgba value for the color so zero zero zero and then point one and then let's just also make sure the color of these is white so the text will disappear now but we're just going to color the body now and give it a color gradient so grab the body and give this a background of a linear gradient of light blue as the first color and then dark blue for the second color and then let's just make sure the height is 100 vh so that's all we're going to need for the setup so all we need to do now is just start the first layout so i'm just going to close these off here and then i'm just going to grab that class of beginner which is the class that wraps around uh the box one two and three um square brackets curly brackets and the first thing i'll do is just give this a height of uh let's say 90 viewport heights and then i don't want this spanning across the whole width of the browser i want to give this a width of let's say 90 percent and then let's just give it some margin on the top and bottom of 20 pixels and then auto on the left and right and then to create that pancake design layout first just need to set the display value to grid so it becomes a grid container and then if we look at the original layout you can see the header section and the footer section here are much smaller than the main content so to create that we need a grid template rows because we want to affect the rows so we have three rows the first row i want to be auto the middle row i want to be one fr and the last row i want to be auto as well and let's just also give this a gap of 20 pixels just a bit between the elements now what this is essentially saying is that the first and last line i want to be auto which only take up the space they need which is just this text here and a bit of padding and then the one fractional unit takes up all the rest of the available space and which is this large section here so that's it really for this layout we've created a nice pancake design here really simple but can be quite effective at times so the next section is going to be the beginner plus level um which is similar to the pancake design but instead of rows we're going to be using columns and we're going to be utilizing the 12 column grid system so in the index.html file you can see i've just changed the class to beginner plus and we've got the same amount of boxes and i've just changed a bit of the content so inside the style sheet we're going to go inside the class of beginner plus set a height of this to be uh let's say 90 viewport heights and then um i don't want to span across the whole width of the browser i want it to span across 90 so it's just a bit more central and then for margin 20 on the top and bottom and also on the left and right so it's more central and then from here we just want to make this a grid container so display grid and then instead of rows we're going to grab grid template columns and we're going to use the repeat function and create 12 columns each with a width of 1fr so this is what it currently looks like at the moment and we'll open up the inspector tool and click on the grid here and you can see our 12 columns there now what we can do from here is grab each individual element and span it across as many columns as we like and to create that layout so we're going to grab the first one of beginner plus go inside this and grab box one which is the nav and then using the grid column property i want this to span across two columns so really tiny at the moment but you'll see now nav is spanning across one two columns and then for the main section this is the largest section so this is box two i want this to span across six columns so you see now it's already starting to take effect and then just for the blog section uh we have four columns left um which totals 12. um so we want this to span across four and then let's also just add a bit of gap here of let's say 20 pixels to add a bit of gap between the elements and as you can see now the nav is spanning across two columns the main is spanning across six and the blog is spanning across four so another simple layout but instead of using rows we use grid template columns and we've now created our 12 grid column system which we're going to be using in the next level to create a really cool responsive layout so our next layout is going to be this intermediate level which is going to be utilized in the 12 column grid system and it's going to be responsive so as you can see in this section we have six different items so i've just included three more boxes and just changed the content around a little bit and the numbers here just represent which number they are um on the box class so if we head inside the style sheet we're first going to create the mobile version so if we go back to the live server here and go inside intermediate and the first thing i want to do is just set a height of 90 vh then give this a width of 90 percent and then just some margin on the top of 20 pixels and then auto on the left and right and just so it centers it and then we're going to make this a grid container so we're just going to say display grid and then just give them a bit of a gap so grid gap of about 10 pixels and that's the only markup we need now for the mobile view um so the next view is going to be for the tablet so we're going to put this inside a media query which has a minimum width of 768 pixels so once this is triggered the styles we put in here now um will make this thing responsive so the first thing i'm going to grab is the intermediate class again and um so i'm just going to create our columns or our 12 columns so repeat 12 1 fr and then let's also define our rows so grid template rows so the header i want to be 100 pixels the uh ads i want to be 80 pixels the main section is going to be the largest so 30 pixels then the blog and side is also going to be 80 pixels and the footer is going to be 100 pixels so the next thing i'm going to do now is just make this a bit larger so we hit that threshold of 768 pixels and i'm just going to open up the inspector tool so we can see the grid lines so it can help us lay this out so the first box i want to grab is the header box so grab the intermediate and this has a class of box one and i want to grab the grid column property and i want this to start on the first line and end on the 13th line which is the last line here so it spans across all of the columns and then the add and the main section will be the exact same and we want to span across all of the columns so box two in box three and then for the blog and the side these are spanning six columns so uh gonna duplicate this quickly and grab uh the fourth and then we want it to end on the seventh line and then we'll do the same thing for box five but instead of starting on the first line we want it to start on the seventh and finish on the 13th so as you can see now they're taking up an equal amount of columns and then the footer is just going to be the same as box one so i'll just paste that in here and we'll just change this to box six so as you can see now if i just get rid of those lines um this is the exact same grid as the original so the next layout for this section is going to be for the desktop so it's going to be inside this media query of minimum with 1080 pixels so i'm just going to close this off and then just adjust this a little bit so for this section we're going to go inside this media query here and we're going to grab the intermediate class again and then for grid template columns we're going to have the same thing so repeat 12 columns 1 fr now for the rows i'm going to change it up a little bit and i'm going to have grid template rows so the first row is going to be 100 pixels the middle row is going to be 400 pixels and the uh third row is going to be 100 pixels so if we go back into our live server here the first thing i'm going to do actually is just copy and paste these inside uh the media query of 1080 pixels and then from here i want the header to remain the same but as you can see in the desktop version the ad only spans across two columns so to do that we're gonna go inside box two here and i want this to start on the first line and then end on the third and then i want this on the grid row to start on the second line and end on the fourth and then for box three which is the main section it's going to fit inside this section here we want this to start on the third line and stop at the tenth line so let's open this up and inspect the tools actually so we can see the lines a bit clearer so you see here starting on third and ending on the 10th and then let's also span this on the rows so grid row start on the second line and end on the fourth so it's starting to look identical to the original here so for the side uh we want this to span across three columns to start on the 10th and end on the 13th line so that is box five so we'll go to box five and for grid column starting on the tenth and then ending on the 13th and then we still need to adjust it on the row because we want to start on the second line and finish on the fourth not start on the fourth and finish on the fifth so we'll go underneath grid column grab the grid row and we want to start on the second line and finish on the fourth so that should put it in this section here and then from here all we need to do is just adjust the blog and the footage so the blog is the fourth box so we want this to start on the first line and finish on the third line so you'll see the blog there and then for the rows we want this to grid row start on the fourth and then finish on the fifth and then for the foot up we want this to start on the third line column and finish from the 13th and then if we just remove the inspector tool here so if we look at the original you see it's the exact same so using the 12 column grid system we've created a completely responsive layout so on desktop it looks like this when you shrink it down to a tablet and they start slowly stacking on top of each other and then when we get all the way to the uh mobile view you see they're completely stacked on top of each other and it's completely responsive so the next layout in our tutorial is going to be creating the pro level layout which you see here now this again is going to use the 12 column grid system but instead of using the grid lines to help us lay this out we're going to be using the grid template areas now in our finished example here you can see on mobile screen sizes everything stacks on top of each other and then if i grab the browser and i get to tablet size see the layout changes and becomes more responsive and then if i get even bigger to desktop size the layout changes again so we have a fully responsive layout using grid template areas now what grid template areas are is basically it allows us to make a visual representation of the grid using both columns and rows now this actually makes for a faster design process than when we use line based placement or the grid column and grid row properties it's going to be a bit confusing at first but once it's all pieced together it will make sense um so i'm just going to go into our live server here go inside the style sheet and just lay out some of our general styles so height of 90 viewport heights and then the width of this i want to be 90 margin to be 20 pixels and auto on the left and right and then let's just make this a grid container so display grid and let's just add a bit of gap between these as well so uh let's say 20 pixels so what we want to do now is just create our grid uh template columns of the repeat 12 1fr so we have our 12 column grid system so you can see it here now in the browser now the first thing we need to do here is just to find the names of our grid template areas with the grid area property and we apply the grid arrow property to the grid items so we're going to grab the pro class grab box one which is the header and we'll say grid area and we're going to name this h for head up because in our example the header is the first um item and then i'm just going to duplicate this four more times and the second box is the blog so this is gonna be short for b and for the third box this is the main section i'm just gonna m for short fourth box is this sidebar so s for short on that one and then finally we have the footer so what we've done here is just name our grid items and then what we can do from here is use these to define how they appear in the rows and columns so the next section here is to insert the grid template areas property and then we're going to create our first row so we use double quote marks and the first row in our original example is the header here and it spans across all of the columns so one h here represents one column so we need another 11 so uh 2 three four and then add an extra space here so it's a bit easier to see and then another four so one two three four so we have eight and then we need four more now so one two three four and then what we've done here is define our first row and we've also spanned it across all of the columns so what we can do from here now is uh just duplicate this four more times for the rest of the items so uh the second row is for the blog so we just change all of these h's to b's third row is for the main section so change these all to m's uh the fourth row is the sidebar so we'll just change these to s's and then finally the last row is the footer so as you can see now we've visually created this layout by defining the names of our grid items and how we want them to appear in the columns and rows and this now is our template grid area and what we can do from this point is rearrange this however we like to create different layouts so let's now create the layout for the tablet size so i'm going to grab the original design and make this a bit bigger to the tablet size and then what i'm going to do is just open up the inspector tool so we can see how many uh columns and grids it's spanning and then what i'm going to do is just also grab all of this and then paste it into the tablet media query and then if we look at this now you see the header is still spanning across all of the columns at the top so that's not going to change but you see now the blog is only spanning across four columns instead of all the way across and then it's also spanning across two rows so let's just fix that up now so we'll change this bit to the blog and the main section here you see is spanning across three uh rows so we'll change these to m and it's also spanning across the fourth row so we'll grab these sections here and we'll change that for main you can see the sidebar is the same as the blog so it's um spanning across two rows so we'll change the f's for s's and now if we head over to live server we should have the exact same layout and as you can see now we have the exact same layout as the original so you can really see how cool grid template areas is now let's create the layout for the desktop version so we'll go to the original and see what this looks like on a desktop so i'm just going to adjust this to and i'm just going to copy and paste all of this and put it in the media query for the desktop and then let's open up the inspector tools to see how many columns and rows this is spanning so you see the header here is still the same so it's spanning across all the columns um in the first row you can see the blog section here is actually only spanning across two columns in this section and it's also spanning an extra row so um we'll change these two bits for the main and then we'll also adjust this section here because it's spanning across three rows so we'll change those to blog and then the footer here you can see is actually starting on the first column so we'll change these up to f's and you can see the main is also spanning across the third row there so just change these s's to m's now the side bias is in a completely different spot and it's spanning across two columns and four rows so we'll grab the second row up here change these to s's and then do this all the way down so s and then the final row so if i go over to live server and the project we're working on it should have the same layout and as you can see it does so again guys you can really see how cool and powerful grid template areas is in creating layouts for your projects so if you're more of a visual layout creator type style then grid template areas is just for you so our final layout in this tutorial guys is going to be the master level so this section here just has four cards of different simpsons characters and currently right now on mobile screen sizes uh they're stacking on top of each other but if i make this bigger now so we get to tablet you can see that it's responsive and you can fit more cards on one line and then if we get even bigger now so to desktop screen sizes you see when there's enough space for another card it will automatically fit one on the line and then if we keep going you see now it's fitting all the cards on one line and the beauty of this is that we're not using media queries to make this responsive so i'm just going to shrink this back down to mobile screen size and i'm just gonna go to our live server here and explain the layout a little bit so currently right now all of the cards are wrapped in a div called master container and inside here you can see we have a div with a class of cards so we have four cards inside of the card there's a div of the class of simpson image which just has that image of the character of that specific simpsons character and then underneath that we also have a div of the class of simpsons info which just has a h2 h3 and a paragraph now if we head inside the style sheet you can see i've already applied some styles to the images so i've given them a width and a height and then a border radius as well as making that object fit to a cover value so it keeps its aspect ratio now the first thing i want to do here before i make this responsive is just start the cards so it has the class of the card and i want to give these a background of an rgba value so we're going to say 255 255 and 255 which is like a dark gray color and then we'll say a point two for the opacity and then just get rid of all this text and then let's also give the cards here a box shadow so box shadow uh zero on the x and y and then a five pixel blur and then let's also give this an rgba value so this is going to have zero zero zero and then point one for the opacity and then let's just also align the text to the center here so text align center and then let's also give us a bit of padding so let's say about 10 pixels and then let's also give these a border radius of about let's say uh 20 pixels and then let's also style the info a little bit for the card so uh the card and then the simpsons info and i want the background color of this uh to be dark blue uh the width of this to be a hundred percent and the border radius to be uh 20 pixels and then let's just make the padding uh say about 10 pixels and this also make the color of this white so that's all we need for the styling so now let's all make this responsive in one line of code so first we'll create a grid container here and the way we're going to make this responsive is just one line of code we're going to need four steps first we're going to need for template columns then we'll need the repeat function and then we're going to need the keyword of auto fit and what this will do is fit another card onto the line once the threshold minimum width is triggered now there is also an auto fill keyword and if you guys want to learn more about that check out my five minute friday's episode which goes into a lot more detail about both of the keywords but for this example we're just going to use autofit and then the last ingredient here is the min max function and this is basically exactly what it says on the tin we set a minimum width and a maximum width so let's just say we want our boxes here to have a minimum width of 350 pixels so they can't go any smaller than this and then we want their max width to be one fractional unit so if there's a bit of space left over uh the cards will fill that space and as you can see already it's become responsive so what i'm going to do now is just add a bit of gap here so i'm going to say 20 pixels and then i'm also just going to set the width of 90 and then margin to 20 pixels top and bottom and auto and as you can see um it's exactly the same as the original so if i grab this now it should become responsive so if there's enough space to fit two cards um the autofit uh keyword will kick in and fill that space with another card and then if we go even bigger and there's enough space to fit a third card uh the autofit will kick in and we'll fit in the other card and if we keep getting bigger and there's enough space for the fourth card the auto fit will kick in again and again this works in reverse so the cards have a minimum width of 350 pixels so we specify that they can't get any smaller than that so if we shrink the screen size down and there's not enough space for four cards the autofit keyword will kick in and push the card onto a new line and then if we get even smaller and we can't fit a third card that will jump down onto that line and then if we get even smaller now the cards will stack all on top of each other because there's a minimum width of 350 pixels and they won't get any smaller than that so that will conclude the video guys i hope you enjoyed it and i hope you are now confident in using some of these layouts in your own projects if you guys like the content please hit the like button and please consider subscribing if you have any questions then leave them down below and i'll see you guys next time

Channel: CodeLab

Views: 1,169

Rating: 5 out of 5

Keywords: css grid tutorial, css grid layout, css grid, web design, responsive web design, web development, master csss grid, grid css responsive, grid css responsive website layout, css grid layout responsive, css grid layout project, css grid layout 2020, learn css grid in 20 minutes, learn css grid in 5 minutes, learn css grid and flexbox, css grid responsive website layout, responsive grid layout css, responsive grid figma, css tutorial

Id: -myi8EU8HIo

Length: 27min 28sec (1648 seconds)

Published: Sat Jul 24 2021