Learn CSS Grid by Building 5 Layouts in 17 Minutes | CSS Grid 2021

i have a bad news and a good news the bad news is that grid is complicated and there are many things to learn but the good news is we don't need to know everything in this tutorial we're going to build file layout using css suite and by the end of the tutorials you will be ready to use css grid in your next project if you want to follow along be sure to check out the description to download the resources otherwise if you're ready let's get started if you open the project you could find in total 5 tasks and for example if we open the test number 1 you will see that we have a container and 3 item inside item is a block element with padding of 8 pixel 4 pixel border with tomato color you could find it over here you also notice here that i'm using live server so that whenever we change something the page will be reloaded and we can see the change our job is to build file layout and you can find the layout with the figma link in the description if you need more time to look into the project feel free to pause the video otherwise let's get into it for the task number one we need to build a pancake stack layout so let's go to the visual studio code and let's go to the css under task 1 container let's say display grid and we want the container to take at least hundred percent of the view height so let's say height 100 view height and what we want to do is that we want the main to expand as much as possible so we can say grid 10 bit row and we're going to create three rows and the third one would be r2 the second one would be one fraction and the third one would be outer and if we save that you can see here that the main now would expand as much as possible whereas the footer and handle only take enough space to wrap around its content you would find this layout everywhere even in one tutorial that i made few weeks ago so check it out now that we have done the test number one let's move on to the task number two for the second task we need to build 12 columns grid layout the first item will take four columns and the second item could take six column so let's go to visual studio code let's also change this to be task number two and in the task number two you could see that we have a container and two item with two different class names and both of them has a height of 50 view height so let's go to the task number two continue in here we also want to say display grid we also want to have height of 100 view height and we want to create 12 columns so let's say grid template column repeat 12 time one function and now if we save that you can see that we have now 12th column the first one takes the first column and the second one takes the second column so now what we have to do is to tell how many column the item should take so let's go to the item number one in here we want to say grid column start we want the item one to start from the column number two and we want it to end at number six so let's say grid column and six and if we save that you can see here that the item number one start from the column number two and end at number six so it's not taking the column number six it could be the same if you say in here span four so what we're doing here is that we telling the item number one to start from number two and spend four column and we also can say grid column two and span four and it's the same thing but it's just different syntax and similar to the item one let's copy this and paste it here for the item number two we want it to start from number six and span sec column so let's say span six and if we save that we have something similar to the layout but we want to have some spacing between the item so in the container let's say column gap and put it 12 pixel and now between every column there would be 12 pixel gap the next thing we want to do is to align the item in the center of the container vertically so similar to flexbox we can say align item center and grid container also support justified content so you can check it out later on there is also a tutorial that i use 12 column grid layout so check it out so now we're done with the task number two let's move on to the task number three for the task number three we need to build a responsive layout and we're going to start from mobile to desktop and i'm going to show you two options the first option we're going to use trial column grid that we learned from the task number two and the second option we're going to use a property called grid template areas so let's go to visual studio code let's also change this to be task 3 option 1. in the html file you will see that we have header navigation main sidebar advertisement and folder and each of them has its own class name so let's go to the css under task 3 option 1 container let's say display width we also want it to have a height of 100 view high we also want the main to expand as much as possible so let's view what we learned from the task number one let's say we tamp it well the first one would be l2 the second one r2 the third one which is the main would be one fraction and the other three would be l2 right now the main expand uh we also want to have gap between the item so let's say gap 24 pixel the reason why i'm using gap instead of row cap is because later on on desktop view we also want to have gap between the column as well now that we're done with the mobile view let's make the screen a bit bigger let's make it bigger than 720 so if the screen width is more than 720 we want to have 12 columns so let's say grid template column repeat 12 times one function the header is going to take 12 columns so let's say grid column 1 and span 12. all right the navigation also take 12 columns so let's just copy this and paste it here for the main we want it to start from number 3 and span 10 and for this eyeball we want it to start from number 1 and span two and notice here that we want the sidebar in the same row with the main but because in the dom the sidebar is below the main so now we need to specifically tell which row the sidebar will take so in here we can say with row and we can say three and if we save that you can see that now the sidebar is in the same row with the main which is the third row after the header and the navigation alright so for the add we also want it to start from number one and spend two column and the footer is going to start number three and expand ten column and you can see here that because the advertisement is above the footer in the dom we don't need to tell the advertisement which column is to take you also notice here that it does not take 100 of the view high so we need to fix the template row so let's copy this and paste it in the container in here the first one would be l2 the second one how to the third one would be one fraction but we don't but we don't have the two last so let's delete that let's move on to the desktop view so let's make it a bit smaller and make this a bit bigger and we're going to work with the screen which is bigger than 1020 pixel so around here so in here we also want the header to take 12 columns so let's delete that because it does not change the navigation is going to start from number 3 and span 8 column i need the same with the mid so let's copy that and paste in here and now we also want the sidebar to take the row number two as well so we can say here that grid row and it's going to start from number two and end at number four all right and for the advertisement we wanted to take the last two columns so let's say the advertisement start from number eleven and spend two and we also need to tell that the advertisement should take the row number two and three so let's just copy this and paste it here all right now the footer should take 12 columns so let's say grid column start from one and span to now we have what we needed and let's check out if it works right it works perfectly and this layout you can actually find it on the dev.2 now we're done with the option number one let's move on to the option number two so let's go to task three option two under task three option two container we also want to display grid we also want to have the height of 100 view high we also want the gap of 40 pixel and we also want the min to expand as much as possible so let's say grid template row r2 r2 one function l2 l2 and r2 alright so now we have the mobile view in order to use grid template areas we need to define the area of the item so in the header we can say width area let's say this one would be header and let's copy this the navigation would be just nav the advertisement would be at same with the sidebar admin and folder and now if we save that it's not going to work anymore so in the container we need to define the template area so let's say grid template area in here let's say the first row would be header the second row would be navigation the third row would be main the fourth row would be the cyborg and then to add lastly we have the footer and if we said that it's still going to work the same but by using template area later on if you want to change the order of the item it's super easy all we have to do is say for example if i want to move the advertisement under the header all i have to do is just put the ad below the header and if we save that you can see that now the advertisement is below the header alright so i hope that you get the idea and let's change it back all right the next thing we need to do is to work with the tablet view which is more than 720 pixel so if the screen is bigger than 720 pixels in here we also want to use grid template areas so let's copy this and paste it here but instead of one column we want to have three columns so let's copy the header two times and the navigation two times as well and for the main we want it to have the sidebar here and then the main and the main will take the two column and cyber will take one for the ask it will be the same and put the footer so now what we are doing here is that we creating three column and four rows and the header take three column the navigation take three column the sidebar take one column whereas the main take two column and the advertisement take one and the phototic two and we also need to change the grid template row here so let's say we template row r2 r2 one function r2 and i save that so now we have what we wanted and let's move on to the desktop view in the desktop view which is more than 1020 pixel we want to do the same thing so let's just copy this and paste it here all right now we want to quit four columns so let's copy header one more time and for the second row we want to have the sidebar the navigation and the advertisement and for the third row we're going to disciple the main main and advertisement and for the last row we want the footer to take all of them so let's say footer 410 and now if we save that we have the layout that we wanted so now we have two options to compare both of them has advantage and disadvantage but depends the cage to the one that is easier for you and now that we have done with the task number three let's move on to the task number form for the task number four we need to build responsive layout with our media query so let's go to our code let's also change this to be task 4 all right in the task for container and we want to say display to be grid we also want to have a gap of 24 pixel and in order to have a responsive layout with our media query all we have to do is say width template column repeat out to fit mean max 150 pixel and one fraction so now if we say that we have what we wanted and what we just did was that we create a flexible number of columns and the column should never be less than 150 pixels right let's go to the html and then try to comment out the last three items and here you can see that it could try to expand to fit the container so we also have another property called how to fill and if we use that it will not try to expand to fit the container anymore so that's the difference between autofill and autofit so the last thing i want to show in the test number four is that we can also control number of columns the item should take so for example i want the item 5 to take 2 columns all i have to do is say grid column and span two so now the item five take two whereas other take one and you can find this layout in many places for example the product listing page but yeah now we are done with the task number four let's move on to the last task for the last task we're not just going to create 12 column grid but also 12 column row so let's go to visual studio code and let's also change task 4 to be task file under task file container let's say display grid and we also want to have a height of 100 view height now we want to have 12 column and 12 rows so let's say grid template column repeat total one function and it's the same thing with the grid template rows so now we have 12 multiply by 12 grid and what we can do in here is that we can place the item whenever we want so for example in the item number one i want to say grid row it's going to start from number one and span three row and the same thing with grid columns so let's say the grid column start from number one and span three times and let's also do the same with item two three and four but instead of starting from number one one is to start from four seven and ten all right if we save that we have the layout that we wanted so with this example you can see that we can define as many columns as we want and how many rows and we want and we can place the item whenever we want inside the grid so this is useful if you need to work with a layout where you need to put the item in a specific place and it concludes task number five so i hope you enjoyed the video and learned about css grid if you haven't yet check out dev challenges dot io follow me on twitter and subscribe to my channel otherwise happy coding and see you the next video bye

Channel: Thu Nghiem

Views: 28,159

Keywords: HTML, CSS, Grid, Tutorial, Responsive

Id: CC2HkBZuReY

Length: 18min 7sec (1087 seconds)

Published: Tue Nov 17 2020