#37 CSS Grid Tutorial [Complete Guide] - CSS Full Tutorial

[Music] hey there guys it's amy you're watching dev dreamer and this is the complete guide to css grid in this one video we're going to learn the entire css grid layout system using examples throughout first we'll look at the grid container properties and then all the grid item properties and make sure you watch right to the very end because we'll be taking what we've learned and building a dashboard design using css grid and of course there are chapters or timestamps in the description box below to each individual section if you're new here and you enjoy the content consider hitting the like and subscribe button down below make sure to turn on all notifications by clicking the bell so you're notified as soon as new content is up okay so let's start with answering the question what is css grid css grid is the most powerful layout system in css it's known as a two-dimensional system meaning it can be used to layout elements in roles and columns at the same time now in our previous lesson we looked at the complete guidances as flexbox and sometimes people are a bit confused as to the difference between css grid and css flexbox so let's see what the main difference is between the two the main difference between the two is that grid is a two-dimensional system and flexbox is a one-dimensional system and all that basically means is with grid we have control over how we layout our elements horizontally and vertically okay or across the roles and the columns at the same time whereas with flexbox you're laying out your elements either in a column like we have here or in a row you have to pick one or the other we can't do both within a single flexbox container so that's the main difference between the two and actually grid and flex box work really well together okay so before we look at some cold and see how css grid works it'll be really helpful to understand the main concepts behind grid and this will give you a clearer picture of how it works okay so first then we have grid lines in css grid our columns and roles are made up using grid lines so we can have either column lines or raw lines here we have an example of a column line and this would actually be column line number three as it's the third line from the left next we have good tracks and these are basically the full column or row in the group container so here we have the grid trap between the second and third row lines there's also grid areas think of these as the total space surrounded by four grid lines like we have here and then finally we've got a grid cell which is basically a single space within our grid if you've ever used microsoft excel then you can think of grid cells as the different cells in an excel spreadsheet don't worry too much at this stage guys if you're not sure what this means we will go over all this as we go through the code now css grid is made up of container properties and item properties and you can see them all here now don't worry i won't bore you by reading them all out because as you can see there are quite a lot of them here but you can feel free to pause the video to have a read okay so that's enough of the visuals let's now jump into the code and we'll start by going through each container property in detail okay so here we are then in our text editor in our html we have this deal with an id of container and then inside that we have six divs each with a class of item and a class of one to six as well and that's these yellow items over here let's take a look at our css okay so this is just a styling for our container now in order to turn this container into a grid container we simply set the display on the container to grid and now you can see all of items are actually expanded to fill this container all these items are now grid items now notice that all of our items are stacked one on top of each other all in a single column well with css grid we can actually specify the number of columns and rows we want our grid to have by using the following two properties and these are going to be the first two properties we look at they are grid template columns and grid template rows now the way that this works is not only do we specify the number of columns and the number of rows that we want but we also specify the size of set columns and rows let's see how this works so first of all then on grid template columns let's say we want our items to be in a column of 200 pixels and now you can see all of our items are stacked inside a column that is 200 pixels in width and let's keep going let's say we wanted another column of 200 pixels and another one so now you see we've specified one two three values just minimize this bit one two three values and we have one two three columns that each are 200 pixels in width now notice we've got some extra spacing here and whenever we want our items to fill up any extra space that we've got we can simply say auto and now items fill up this extra space so whenever there's an undefined size of space that we want to fill up we can just use the auto keyword now we're not just limited to pixels so let's just scrap this we can also use percentages so let's go for a first column of 50 okay so we've got 50 column here and another one of 25 and a final one of 25 now css grid also comes packed with some special functions and keywords let's take a look at what they are and how they work so first we're going to look at the fractional unit now whilst we can use these units percentages and pixels etc when we want equal columns or rolls the preferred unit to use on our grid container is a new unit which is the fractional unit the fractional unit takes a fraction of the available space and divides it equally so let's say we wanted three equal with columns well we just say one fr one fr whatever and now you see we have three equal width columns of one fr and if we actually expand the viewport we can see that these will always adhere to that rule now when we're using the same value as we are here we can use the repeat function so let's just scrub this and say repeat and then in brackets here we specify two values the first is how many times we want this to repeat so we're going to say 3 and then comma what we want the size to be so we're going to say 1 fr and here you see we get exactly the same thing we have three equal width columns that are a fraction each so if you wanted six equal width columns we just change this to six and now you can see we have six equal width columns now another special function we have access to is the min max function now this is really helpful as you can probably guess by the name min max enables us to specify a minimum value and a maximum value that we want our column to have so let's get rid of this and let's say we want our first column to have a fractional unit like we've seen before but for the second column we're going to say min max and then in brackets this takes two values the first value is the minimum width that we want our column to have so i'm going to say 300 pixels then we do comma space and now the second value is going to be the max value that we want our column to have so let's go for one fr so at the moment then they both look the same but let's go ahead and shrink our viewport width down and let's see what happens are the ball shrinking sort of same rate but at this point here you can see that it's only the first column that shrinks and that's because our second column here has hit the min width of 300 pixels main comes first then max we can probably see this better with 400 pixels actually so let's just change this to 400 and again the ball shrink at the same rate but at that point there the second column hits that 400 pixel minimum width so it's not going to go any smaller than 400 pixels but our first column here of 1fr continues to shrink okay so that's the min max function let's go ahead and set this back to let's go for repeat and let's go for three 300 pixel columns okay so we have our three columns of 300 pixels each but we've also got this extra space here let's say we wanted to fill the space in with 300 pixel columns as long as we had the space and as long as we had the items to fill them in we can do that by using another special value that we have in css grid which is the auto fill value so let's say auto hyphen fill so instead of specifying a number now we're saying auto fill so let's expand our container to see what happens and as you can see whenever there is a 300 pixel space there because that's what we've specified in our repeat function here and as long as we've got items to fill them in our items will jump up and fill in those columns so there and there as well so that's auto fill now there's also auto fit and the difference between the two can be a bit confusing but let me explain so first of all let's go to html and let's just get rid of these items for now so we've just got two and to really see the magic of auto fit uh it's best to use a min max value so let's just get rid of this and so 300 pixels let's say mini max minimum of 300 pixels and a max of one fr and let's just go ahead and minimize our container so that our items fit perfectly within the container like so okay so we set our columns to repeat with autofill on and a min max of 300 pixels and one fraction so let's see what happens as we start expanding this container okay at this point we've now got a 300 pixel space inside a container and so auto fill fills our container with an extra column if we keep growing we can see now we've got two columns of 300 pixels in width if we just right click and open up the dev tools we can see this more clearly and now you can see those two columns so autofill will fill our container with columns with the width that we've specified as long as it's got the spacing there so let's set this back and see what auto fit does and just turn off devtools and let's change this to auto fit now let's see what happens so let's expand the container keep expanding keep going keep going and as you can see no additional columns are created even though we're expanding our container now what's happening here well the difference then between auto fill and auto fit is that auto fill creates the columns even if there are no items to fill them in so we've only got in our html here we've got two items but auto fill will continue to create the columns even if there are no additional items there that can fill them in auto fit only creates the columns if we do have items to fill them in so let's go ahead and just minimize this again and let's go ahead and add some more items in okay so now we've got six and now we've still got auto fit on so let's just expand our container again see what happens so this time because we do have extra items that can fit into that space autofit goes ahead and creates the columns okay so that's the difference between auto fill and auto fit let's just go ahead and reset our grid template columns to repeat and we'll go for three one fr okay now we can also choose to name the grid lines so our column grid lines are one two three and four and we can choose to name these lines like so to name a line you simply put it in square brackets so i'm going to call this first column line call which is short for column start okay and that column is going to have a width of one fr the second column line i'm going to call carl hyphen 2 and again that column will be 1fr so far then what we've got is this line here is call start then we've got a 1 fr column width this line here is called call 2 call hyphen 2 and then we have a column width of one fr let's keep going the third line is going to be called call three quantifier so we've got call start call two call three and then this final column line here i'm going to call column hyphen end now why are we doing this well we're not just doing good for fun naming our grid lines whether it's our column lines or our roll lines will become useful when it comes to moving our items around within our group container and that's done using a grid item property and of course we'll use these and take a look at that property a bit later on and of course we can do the same thing for rolls as well so let's go ahead and specify our first row to be 100 pixels in height and our second row let's go something smaller let's go for 50 pixels so that's how to set up our columns and rolls on our grid now notice on the rolls here we've got all this extra space and the reason why we got this space is because we only have six items if we had more then they would continue to wrap down and fill up our container let's go ahead and add a few more items okay so now we have 12 items and we filled up a container and that brings me on nicely to my next point we've only defined two rolls here so we've explicitly defined a 100 pixel row and a 50 pixel row and so any subsequent roles will be implicitly defined these are known as implicit grid tracks well let's say we wanted to control the size of our implicit grid tracks we can do this by using the next properties we want to learn which are grid auto columns and grid auto rolls okay so let's say we want any additional roles in our container to also have a 50 pixel height we do that by simply setting grid auto rolls to 50 pixels and now you can see our additional rolls here have a height of 50 pixels so in this way we can control the size of any implicitly defined grid tracks and of course you can do the same thing for grid orders or columns as well now we also have grid auto flow and this works in a similar way to grid auto columns and roles in that it's all about how things are automatically placed inside our grid container so for this then let's go ahead and change grid template columns to repeat 12 1fr so we have 12 eq with columns and let's remove these extra items so we've just got six okay so by default grid autoflow is set to roll and what this basically means is whenever we have any new items inside a container place these items inside a container according to the role so let's put some new items into our container and let's see how this works okay so now we have two new items items a and b and as you can see they've both been placed along the roll let's go ahead and add some more items in here and as you can see they're all being placed alongside the roll and again that's because grid autoflow is set to roll we can also set grid autoflow to column let's go back to our css and let's change this to column and now you can see our items are laid out according to the column so if we were to add some more items in here you can see that the items are being placed inside the container according to the column now there is also another value for grid autoflow here and that is the value of dense so let's just go ahead and remove column and for this i'm just going to go ahead and select item a and what i'm doing here is i'm using a item property called grid column to move item a inside our container and of course we will look at this a bit later on i'm just going to set this to 10 stroke 11. essentially all that means is take item a and start it at column 10 and end on column 11. so that's column line 10 and column line 11. so now items a and b have been pushed over here so now let's take quick autoflow to dense and let's see what happens okay item b has now moved to fill in this extra space that we had even though in our source order item b is placed after item a let's go ahead and duplicate item b again and let's see what happens as you can see these items have filled in this extra space that we had and again that's because we've got grid auto flow set to dense now use dents with caution because obviously it will change the visual order of your items we can also say roll hyphen dense and column hyphen dense to give us a bit more control as to how these items are filled in so just bear that in mind for now let's go ahead and set good autoflow to the default of roll let's remove this and let's get rid of these extra items as well okay let's also just change this to three as well okay so now the next group container property we're going to look at is how to set gaps in between our items so at the moment then you can see our items are all bunched up close together there's no gaps in between them and we do that using red column gap and grid roll gap so let's say we wanted a 10 pixel gap in between our columns well we seem to set quick column gap to 10 pixels and now we've got our 10 pixel spacing let's do the same for grid raw gap as well and now we also have 10 pixel gap along the row as well now there is a shorthand property of this as well so we can just say grid hyphen gap and for this first we specify the role and then we specify the column so let's say we wanted a 20 pixel gap on the roll and let's go for a 30 pixel gap for the column so as you can see it can be declared on a single line now here we've got our column gap and our raw gap set to the same amount so we can just specify one value in here and what this will do is it will set the same value for both rolls and columns so now we have a 10 pixel column gap and a 10 pixel roll gap now the next grid container properties we're going to look at are all to do with how we position our items within their cells so we have align items justify items and place items let's start with the line items so align items positions our items vertically within the grid cell so by default this is set to stretch but we can change this to start and now you can see our items are placed within the actual cells at the start and see this bear let's just right click and open up dev tools okay so now you can see each item within its actual cell and let's change this to end we can also say center so align items is all about how we position our items vertically within their actual cells now justify items does the same thing but instead this is along the x-axis or horizontally so here we can say start as you can see now it's been placed at the start of the cell and again we can say end center and again by default this is actually set to stretch and finally place items is just a shorthand for align items and justify items so the way this works is first we say how we want to align our items so as is center and then we see how we want to justify our items so here's stretch so we get the exact same thing here simply by using the short-term property of place items if you wanted them both to have the same value for example if you wanted just of our items to be centered as well then we can just specify a single value in place items of center and this aligns our items to the center and justifies items to the center as well okay for now let's just set this to the default of stretch and let's go ahead and comment these out so that's how to place our items within their actual cells to place our entire content within the container we use align content justify content and place content so let's see how these work okay so let's just move this up and let's start with align content so again align content is all about how we align our content vertically within our container so it's currently set to start because at the start of our container here we can say end and after that puts out at the end and we can also say center we can do space between so now we've got space in between our items space around so now we have space not only in between our items but also around our items and finally we can say space evenly so that we have an equal amount of spacing either side let's go ahead and set this to center for now and now for justify content we can do the same thing except horizontally so let's just first go ahead and change our fractional unit to 150 pixels okay so we've got some space to work with here and so at the moment this is in the start position again we can also say end to move to the end horizontally center space between space around and finally space evenly place content as you've probably guessed is a shorthand property for aligned content and justify content so if you were to write this as a shorthand property we'd simply say center space evenly and as you can see we get the exact same thing here so once again if you wanted to we could just go ahead and comment these out again if we're using the same value then we just specify a single value so this sets a line content center and justify content to center the next property we're going to look at is grid template areas this one's pretty cool grid template areas is basically a visual representation of our container and it works hand in hand with the grid item property called grid area so let's see how this works for this example i'm just going to go ahead and change our css and html okay so we've just commented everything out except for display grid let's also change our html okay so now instead of numbers we've got four divs called header main sidebar and footer and they've all got a different color okay so let's see how grid template areas works i'm just going to set grid template columns and grid template rolls to the following okay so for grid template columns then we've got three equal width columns as we're using one fraction and we've also named our column lines as well and then for the rows our first row is 60 pixels our third row is 100 pixels and then in between the two we have auto so that any items here will just fill up the space okay let's give ourselves some space here and let's say grid template areas so the way that this works is we're basically defining areas within our container and we do this with double quotes now each double quote represents a single row so we have one two three rows so we're going to need three double quotes so this is the 60 pixel row this is the auto row and this is the third row of 100 pixels now the way this works is within each row depending on how many columns you've specified so here we've specified one two and three you're basically naming each column within the row so what we want for this top row of 60 pixels is a header so i'm going to say header header and header three times like this now the reason why we specify header three times is because these are a visual representation of each column this is the first column the second column and the third column because we want header to span the full width of our container for the second row i'm going to say main main and then sidebar and then finally for the last row of 100 pixels we want this to be the footer okay so as you can see there's not much change that's taking place at the moment and that's because as mentioned the grid template aries property works hand in hand with the grid item property called grid area so how this works is each element here needs to be selected so let's go ahead and do that okay so we've selected each element and now we simply put in their grid area values so header is going to be header and as you can see now our header element takes up the full width of our container because in our grid template aries property we specified this first top row to take up the full width of this container with the header value let's do the same for the rest so main sidebar and finally footer and check this out guys how cool is this our layout now reflects exactly what we had in our grid template areas so you can kind of look at this as a blueprint i guess for your content we've got the header going across the top and then for the second row our main div spans two columns and then for the final column in the second row we have sidebar and then finally we have footer going across the bottom for the last row now you don't need to call them header main side bottom filter we can actually call this whatever we want so let's actually just use the first letters of each and change criteria to h and now we still have that exact same effect so that's the grid template areas property okay so we've got two more grid container properties to look at and then move on to the grid item properties so the first one we're going to look at is grid template now grid template is a shorthand property for setting grid template rolls grid template columns and grid template areas in a single declaration okay so let's go ahead and comment all these out and let's rewrite this using the shorthand property so we say grid hyphen template and the way this works is first we specify our grid template areas so again this is just going to be this one here so we have delta h three times and then after that on the same line we can specify what we want this row to be so we want this row to be 60 pixels okay let's keep going with the next row okay so we've said main main sidebar and we want this row to be auto and for the final row we have a footer of 100 pixels so specify the grid template areas and the grid template roles to specify our grid template columns we simply say and i'm going to put this on a new line we say slash and now here we just add our value for the grid template columns okay so in our case it's going to be this so as you can see using the grid template shorthand property we can specify all of this in a single declaration and now the final group container property that we're going to learn is simply called grid now as mentioned just like grid template grid is also a shorthand property to show you how this works let's go ahead and reset our code okay so we're back to our usual numbers now numbers one to six and we've set grid template rolls to 50 pixels 200 pixels so we have a 50 pixel row and a 200 pixel row grid template columns is repeat three one fr so we have three equal with columns we've set grid auto rolls to 100 pixels and remember this basically sets the size for any additional rows that we have and finally we've set good autoflow to row which is the default value for grid autoflow so once again grid is a shorthand property for setting either grid template roles and grid template columns which are known as our explicit values or grid auto roles with auto columns and grid auto flow which are known as our implicit values so let's see how this works the first thing to know is that we can only specify one or the other in this shorthand we can only declare either our explicit values or our implicit values so let's start with grid template roles and columns so the way this works is first we specify what we want the roles to be slash and then the columns so here we can say 50 pixels 200 pixels to match this and then we can say repeat three yfr and we get the same thing just show you we can change this let's change this to 100 and now we have a 50 pixel roll and a 100 pixel row so we can use grid to set our explicit values in a shorthand like so now let's look at how to set implicit values so with implicit values then this is still the row side and this is still the column side so we've specified grid auto rows to be 100 pixels and grid auto flow to be row so on the row side we're going to say auto hyphen flow and this is basically saying set grid auto flow to row because we've specified it on the roll side and next we just add our implicit raw value which is 100 pixels so do space 100 pixels and for our columns again we're just using this so to summarize then the grid shorthand property can be used to set our explicit values grid template roles and template columns or our implicit values with auto rolls grid auto columns and grid auto flow and the thing to remember is we cannot set both explicit and implicit values on the same side so this is absolutely fine because we've set our roles to be implicit what we can't do is that our roles to be implicit and then also on this side specify our explicit roles okay so that's all the grid container properties well done coming this far we've gone through each and every single one and now what we're going to do is we're going to do the same for the grid item properties okay so now let's take a look at the grid item properties so we've got pretty much the same setup as we have before where we had our six items on the container we've set good template columns to have three equally width columns of one fr and i've also chosen to name the column lines as well and then on grid template roles we've got repeat three 100 pixels okay let's now start with looking at the first grid item property and we're actually going to look at two together here and those are grid columns start and grid column end and what these enable us to do is position our items within the container according to the grid column lines so let's go ahead and select item number one so take a look at a container then currently item number one has grid column star of one and a grid column end of two so currently then it's set to one and two no change there but let's say we wanted item number one to span right the way across to line number three of our column so we can set grid column end to three and as you can see item number one starts on line number one and ends on line number three we can also say to of course four so expands the total width of our container another way to target the very last line is to simply say minus one and as you can see item number one spans the full width of the container now instead of using these numbers here we can also use the names that we've specified on grid template columns over here so let's take call start which was the first line here put this in here and let's say let's go from different let's go call three which was the third column line and paste this in grid column end and now you can see item one starts on line one and ends on line three now we can also use the span keyword so let's just get rid of this and let's say span three and so what we're saying here is start item number one on our first line called call start and then span three lines across so one two and three if we said span two then it would span to our third line here so it starts here one and two and again instead of the numbers we can also specify a name so let's say carl hyphen end or call two now we can also do the same for the role so let's go ahead and target let's talk about item number two now and this works in exactly the same way so remember now our grid roll lines are going across so this is line one this line two line three line four for our third row and then line five is the last row line down here so let's say we wanted item number two to actually start on roll line number two so we can say withdrawal start two and now you can see item number two has moved to start on raw line two and let's say we wanted item number two to go right the way down to the bottom of our container well remember this was line number five so we can just say five and i can see item two spans right the way down to the end of the container now we also have a couple of short term properties for setting both of these so as soon as saying greek club starting quicker than end we can just say grid column and down here we can say grid row and the way that these work is we say start end so for grid column start we want cold start so we just put that in there and for greek column end we want to say span to call 2. so just put that in there let's do the same for grid draw 2 5. so to summarize then these properties enable us to move our items around our container and also to span items across multiple lines now the next set of item properties we're going to learn are align self justify self and place off so let's see how these work so let's go ahead and target item number five okay so we've got align south just to myself and place off so these properties as you can probably guess from their names enable us to position a single item which is why we use the word self anywhere within its own cell so you should be familiar then with how these work so with the line self we're going to position our item vertically so let's go for start so now you can see it's positioned at the start of itself and we have the usual ones we've got end we can say center and of course by default this is set to stretch for justify south we can do the same thing so we can say start and center and again by default it's set to stretch and then place self is just a shorthand property for both these so let's set these both to in fact let's set this one to center and let's set this one to let's go for start so we can declare this on a single line using play south by just saying center start so if you comment this out you see we've still got exactly the same thing now if we had the same value for both let's just uncomment these and just set these both to set them up to center if we have the same value for both we can just use the one value in here like so okay so that's how to use the align self justify self and place off properties and that leads us on to the final item property which is grid area now the grid area property can be used in one of two ways the first is as an even shorter shorthand property for setting grid column start grid column end withdrawal star and redraw end now the syntax for this can be slightly confusing so let's just break this down let's just go ahead and comment these out for item number two and instead let's use grid area so the way this works is we're going to specify four values each separated with a slash the first is what we want our grid role start to be so remember we want item number two to start with item before is currently and we want to span all the way down to the end of our container so our grid roll start for number 2 is going to be 2 and now you can see it's moved into this position here then we say slash and next we specify the grid column start well we want to start on the first column line so here we're going to say one okay next we specify the grid row end so we want this to be five and finally the grid column end is going to be this column line here which is going to be number two so with grid area we've actually specified the items roll start and column start as well as the row end and column end and now the second way that grid area can be used is something that we've looked at already remember guys grid area works hand in hand with the grid container property called grid template areas so we have looked at this one already but just for completeness let's just go ahead and show it to you again so first thing let's go to our html and change these item names okay so now we have our four divs header main sidebar and footer let's go back to our css let's just go ahead and remove these styles and on our container here we need to set our grid template areas so let's go up to container okay so this is our grid template areas so we want our header to span the full width of the top the footage spent full width at the bottom and in the middle we want our main item to span two columns across and then we have the sidebar okay so now we can use grid area to position our items so let's go ahead and select each of our items okay and now one more thing to do before we set our grid areas is to just set our grid template roll so we want our header to have a height of 60 pixels one auto for the middle and then a 100 pixel footer so now we can just say for header it's going to be h main is m sidebar is s and footer is f and as you can see once again we get this layout and with that guys we've gone through every single group property so we looked at all the container properties and all the item properties finally let's now use what we've learned and put it into practice okay so for this example then we're going to be recreating this dashboard design here this is actually a dribble shot from outcrowd and i'll leave a link to this in the description box below but essentially what we're looking to do then is to take this design and lay out using css grid now i've actually opened this image up in a new tab so let's just close this for now okay so here it is in new tab and for this i've already gone ahead and created all these little elements here so if you take a look at our page so i've gone ahead and created all those elements and now what we want to do is use css grid to lay this out so that we turn this into this okay so first of all then let's take a look at our html we have a div with the idf container and then inside that we have a different idea of nav main and profile and those three elements there basically relate to the following so if you have a look at this design we can see that it actually consists of three columns one here another one here this progress dashboard section and then another one over here and i've called those nav main and profile so the very first thing we want to do then is we want to set our container this different idea of container to display of grid okay so on container here let's just change this to r1 okay so on container i'm going to say display grid and now we want to do is we want to define our columns so our nav column is the smallest our main section is the largest column and then this one here the profile section is kind of in between the two so i'm going to go ahead and set grid template columns to 1fr for the nav 6fr for the main column and then 3fr for the profile let's take a look at us okay so it's starting to take shape then so now we've got three columns for nav main and profile now what i want to do is work on each of these individually so let's first work on the nav section so what i'm going to do is i'm just going to move this window over right the way over and we can increase this up to there and let's actually bump this up as well okay so first i just want to define the grid template areas on our container so i'm going to say grid template areas and remember this was basically a visual representation of our layout so we haven't specified any roles here so all we need is a single line and i'm going to say n for the first column for nav m for main and then p for profile now let's go to each element and fill these in so on nav i'm going to say grid area n let's just copy this and do the same for the main area or the main section rather and call this m and finally for profile we'll say grid area p okay so now then let's work on this nav section here so the first thing i want to do then is i want to set this to a display of grid then notice although this is a grid item within our actual container you can also nest grids so that this grid item is also a grid container for its items and we'll be doing the same for the main section and the profile section as well so let's see what we want this to look like then okay so we've got a logo and then we've got our four buttons here we've got some spacing at the end and if you think of this in terms of rolls the logo looks to be spanning over a few rolls there whereas our buttons look like they're all in single rolls so the way i've worked this out then is i've said if each of these buttons represents a single roll i'm looking at the height of that roll and i'm saying how many rolls do we need for our entire nav section and so visually we can say that we need one two three four five six and then here we can probably fit two more buttons here seven and eight so on nav i'm going to say and just switch back to design okay i'm going to say grid template rows and we can use the repeat function so repeat and we want eight rows of equal height okay so now our nav container has eight equal roles let's now place our items into the center of their roles so we want to center them horizontally as well as vertically so we can use the shorthand property place items and we're going to say center and i can see each of our elements or grid items have been centered within their cells now i do also want to specify how these grid items span over the roles so again if you take a look at our design this logo here seems to be using it more than a single row so what i'm going to say is select logo i'm going to say grid hyphen row remember grid row is the shorthand property for grid row star and redraw end so here we specify two values where we want to start so we want this to start on raw line one and we want to end on raw line three and now you can see we've got that spacing in between let's also go ahead and set the grid roll for the other items so i've given these buttons here a different class name so class names are filtered dashboard profile and stats so let's just let's just copy this here and just put them all in for now and go through and change them so we want this to start on three and end on roll line four and this to be four stroke five this to be five and six and finally we want our last button here to start on roll line six and end on roll line seven okay so that's our navbar section complete let's now move on to our main section so for this let's just minimize our text editor and now we're working with the main section so that's this right here okay so if we take a look at the design then we can see that this middle section here consists of four rows we have one here two three and four and we can also see that rolls one two and four have roughly the same height so what i'm gonna do is i'm gonna set rolls one three and four to have a height of one if r and then this third row here i'm gonna give a height of auto so our main then first thing i want to do is let's just first switch back over to ours okay first thing i want to do is set this to display of grid i then want to set grid template rows or grid template rows to 1fr 1fr auto for the third row and then one fr for the final row okay so this is what we've got now let's work on each row individually so first let's start with this top section here so on the design we can see that the title is actually closer to this second row here so i'm going to use the place self shorthand property which remember is a shorthand for a lines up and just by itself and i'm going to set this to end start okay so what that's done is it set align self to end and then justify staff to start so it's set to end vertically and start horizontally which is why it's pushed up into this bottom left hand corner here okay great let's now work on our next section and i've given this section a class of top so section the class up top and if you look at our design we can see that this section consists of one two three columns and this first column here seems to be about three times the size of these two so first then let's set our display on this to grid and then let's set grid template columns to 3fr for this first section here this exam unit 5 and then for these other two here we're going to set those to 1fr and 1fr perfect now also on the design you can see that there's actually some spacing here so we're going to say grid column gap and we're going to go for 25 pixels okay and now the last thing we need to do for this role is if you look carefully the content is actually spanning the full height of the roll and if you look at the design you can see that there's actually some spacing here so we want to align this content to the start so i'm going to say align content and set this to start okay so that's this top section then now let's work on this middle section so section with a class of middle and if you look at the design this actually consists of two equal width columns side by side so we're going to say once again display of grid and we're going to say grid template columns to 1fr and modify and i can see there side by side and finally for this middle container let's now work on this bottom section here which also has two columns of equal width so i've also given that a class of button so here we're going to say display of grid let's just switch back over to our design sorry okay display of grid and then we're going to say grid template columns and let's use the repeat function this time we say repeat and we want to repeat twice one fr okay so they're side by side there's also some spacing as well so this spacing here looks to be the same as the spacing we've got on these columns here so we used to use 25 pixels so see i'm going to say grid column gap and we're going to set this to 25 pixels as well okay now you see we've got that 25 pixel gap and finally the content in this role is actually bunched up at the top of the cell so we actually want to center this vertically so we're going to say align content center perfect so that is now our first two sections done we've got our nav section and the main section let's now work on the final section which is the profile so let's see what we want this final section to look like so once again here we can see that this final column here consists of one two three sections and again we can also put those into roles so let's select our profile element right here let's give this a display of grid and on this i'm gonna say grid template rows and we're going to set this to the first row here to have a height of 30 the second to have a height of 15 and then finally this course progress section to have height of 55 okay and so if we take a look we've got pretty much the same thing there and with that guys we're done let's just make this full size and this is the design we wanted with the layout and this is what we've got once again if you found this video useful guys please be sure to hit that like and subscribe button down below and also i'd love to hear from you guys so do leave me a comment in the comment section down below so take care guys get practicing and as always i'll see you on the next one [Music] [Music] you

Channel: Dev Dreamer

Views: 30,580

Rating: 4.9684544 out of 5

Keywords: Css grid, css grid tutorial, grid tutorial, css grid responsive, css grid vs flex box, css grid website, css grid dribbble, dribbble, css grid tutorial 2020, css grid responsive website layout, css grid layout, grid in css, what is css grid, css grid with examples, css, html, web development, web design

Id: RhUuMl3R1PE

Length: 43min 12sec (2592 seconds)

Published: Sun Nov 01 2020