How to Create Website Layouts Using CSS Grid | Learn HTML and CSS | HTML Tutorial

today we're going to learn about something called CSS grids which is a new way for us to create layouts inside websites now in this video we're going to talk about what exactly is is grid is and how it compares to the typical way we do layouts inside websites when we program them and we're going to go ahead and talk about how to actually set up as users griten how to use it inside a real website so the first thing I'm going to do is I'm going to stare guys what exactly we need to have inside our website before we can actually start using a CSS grid so as you guys can see in front of me here I have a very basic index today HTML file I have a style T on the right side here which I link to inside my index file and one more thing I added inside my HTML document is a meta tag which we need node types you see responsive websites properly inside our devices now when we talk about CSS grids we're basically talking about a way to design layouts which is going to fix a lot of the problems we had using the traditional way we do layers today and what I'm talking about when I say problems that we have with the current way we do layouts I talked about the fact that right now if you were to put some elements inside my body tag down here and actually see them inside the browser if I want some of the element since I'm a body tag to appear next to each other or if we want to do some kind of fancy layer I want to get down into a cell phone format then today we're actually kind of limited to the way we can actually set up layouts inside different formats at least when it comes to the typical way we can actually do layouts using floats and to sort of positioning stuff using CSS so in order to fix that CSS grids were invented in order to allow for us as a developer to using CSS only decide where we want our elements to be inside the browser and we view the website only using CSS now today forwards actually set up a couple of sections inside my front page here I would typically insert a header I would insert a section maybe a sidebar and then a footer now if I want my sidebar my content to be next to each other then I could do so inside my CSS file using float so it exited my sidebar and put a float left and then take my content and set a float right and that way inside the browser we could actually place these elements next to each other but doing it this we're using float actually limits us when it comes to how we can actually insert the different layouts inside different formats because if I were to size my browser down to a cell phone format if I want my footer which has information in it to appear next to the header we can't do that because it would actually take our elements out from our page and shift around the constant inside the HTML document in a way that we can't do using CSS the only way we can get constant next to each other is by actually inserting elements inside the HTML file underneath each other and this is one of the things that CSS Chris actually fixes for us because what we can do using CSS is then we can actually go ahead and create a grid inside our page and start inserting elements from our HTML file into the different grid elements using CSS meaning that if I have a footer inside my HTML file I can actually go and put it anywhere inside the grid that I want to and it doesn't matter in which order my elements inside the HTML file are inside the documents now another thing I want to talk about is when it comes to responsiveness because I mentioned it a few times which is because today when it comes to mobile responsiveness or tablet or desktop it is a must and a requirement that you have to create websites that can be viewed on a cell phone device or tablet you can today in 2017 or after 2017 make websites that are not responsive because most people will use their cell phone or tablet in order to view websites so we need to have something to make our websites responsive easily inside different devices now some of you are going to ask me well we have bootstrap well even though we have bootstrap there's still some benefits from using a CSS grid which you can do using bootstrap and I realize we have something called flex grid inside bootstrap but it's not the same as CSS scripts there are some benefits to using CSS grids instead and I will leave a link the description where you guys can learn more about the differences between bootstrap and CSS grids ok so what I'm going to do now is I'm going to show you guys how sex is set up a grid inside your website and the code did you guys see on the screen here is basically all we need in order to get started with CSS grids now do pair mine inside my starts you just inserted a overall styling where I set the margin to 0 and padding to 0 in order to get everything reset inside the browser so we don't get any kind of weird spacing okay so that's the only purpose for the code inside my stylesheet here so what I'm going to do now is I'm going to do something I haven't really done on my channel before which is I'm going to visualize what I'm talking about using animations because I know that CSS grids do something that's quite new to a lot of people and most people watching this video are going to be people who are used to doing layouts in the way that we used to which is using float so in order to teach CSS grids in a way that's really easy to understand I'm going to use animations in this video okay so what I'm going to do first I'm going to show you guys how we're going to set up the elements inside the body tag here then afterwards I'm going to animate so you guys can actually see what I'll talk about so inside the body tag what I'm going to do is first of all I'm going to create a container and this container here is going to be the grid that we use inside our website so all the content inside the website so just the header the content decide by the footer are going to be placed inside this container here so I'm going to create a div which I'm going to give a class set to grid just to give it something that makes sense now inside this grid class I'm going to insert a couple of divs so I'm going to insert a number in between these div tags I'm just going to say one then I'm going to copy it and just paste it underneath a couple of times so we have something to play with inside our browser I'm going to change the numbers to two three four five and then afterwards I'm going to go inside my stouts you can just give these a background color so you can actually see what is going on inside the browser so I'm going to say we have a class called grid and inside the grid we have a dip box and then every other dip box I'm going to give it different colors you can actually see them so I'm going to say we have a div : n - child parentheses and then inside the parentheses I'm going to write even just going to move it over so you guys can actually see it and then we're going to say curly brackets and then inside of you we're going to say the background color said to red then I'm going to copy this paste it below here and say we have odd dip box inside this quick class over here also going to go and change the color so we have green instead of red then if I go inside my browser so you guys can see that now connect to see what we have inside the website so what we just did is we created five elements inside our HTML file and right now these would actually be the same as different sections inside your website so to tell one our peer call number one could actually be the title we could have number two which could be the header then number three could be the sidebar number four could be the constant and then number five computer footer just as an example if I were to go back inside my code what we can actually do here is we can actually insert these different div elements inside a grid and we haven't actually defined that this is going to be a grid yet so going inside us down CT I'm going to go ahead and say that we want to style class grid curly brackets and then inside the curly brackets I'm going to say they want to display to this as a grid and this is basically all we have to do now to define it is this grid inside the HTML file now we also need to actually place these elements inside the grid in a way that we can actually harness the power of CSS grids and right now we're basically just displaying these you know underneath each other if it were to actually save all this and go back and refresh you guys can see that it doesn't really change anything so what I'm going to do now is I'm going inside my document and after displaying grid inside the grid I can actually start defining columns and rows inside the grid so what I'm going to do is I'm going to go to the next line I'm going to say we have something called a grid - template - columns colon semicolon now inside these columns we need to define how many columns we want inside this grid now right now we don't actually have any kind of column so we need to define at least one column inside the columns here so I'm going to say we have something called one fraction which is actually a new measurement we have inside css3 which is going to say that the entire width of this grid box is going to be one fraction so this is going to give me one column inside the grid now for word to say we want to have two columns inside the script here I can go ahead and add in another fraction so we can actually say space one fraction and now we have two columns inside the grid so when it comes to columns and rows right now as you guys continue to illustration we have one column we have a second column and in order to define where we want content to go we need to refer to the lines outside the columns so right now we have line one we have line 2 and line 3 which right now define that we have two columns inside this grid so now that we have two columns inside out grid here we can actually go ahead and go inside the browser and test this one out so for were to open my browser and refresh you guys consider right now we have two columns inside our grid and the content inside the grid automatically knows where it needs to be inside the grid so right now we have the first item which is div one which is going to be the first one inside the grid then we have div two and as you guys can see it goes next to each other without us actually using float inside the CSS file then we have the third item which goes down to next line then we have the fourth item and so on and so on and so on so as you guys can see it actually behaves like we use float inside the different elements so what we can do now is we can actually go back inside our code and inside the code we can actually go ahead and test down some different measurements we have inside the columns here so right now we use one fraction we could also go and change this so for my first column to only be 200 pixels I can go ahead and save it go inside my browser refresh and now you guys can see the first column is only 200 pixels we can also go and use percentage if you want to we can go and say 20% save it go inside refresh and as you guys can see we get a new width inside the column now we also have a value called out so inside the measurements here so we can actually go ahead and save it once the first wants to be out so then if I go back inside the website you guys can see it actually shrinks down and fits the content that we have inside the column so right now as you guys can see we only have 1 3 & 5 which is not very long when it comes to the width so it's going to shrink down and fit the contents and then the second column is just going to fit whatever space is left inside the browser which is a really nice feature inside CSS grids now when it comes to the divs you have inside the grid we call these grid items and with the grid items you can actually decide how much space they should take up inside out grid so as you guys can see that it actually makes some changes to the divs down here I gave them a class called title header sidebar content and footer and also inserted those names inside gives here so what I'm going to do is I'm going to go inside my stylesheet I'm going to go and leave my grid in here and I'm going to say I want to style my title and with the title I would like for it to spanned from the first column to the second column meaning that it's going to take up the entire row inside the grid here now there's a couple of ways we can do that the first way is we can go ahead and say grid - column - start colon semicolon and then inside of here you can actually go and say then we want the time to start at line one inside column one and then underneath here we can go and say once grid - column - end colon semicolon and then we want it to end at line three which right now since you have two columns is going to be the last line inside the columns so if I were to go ahead and save this and go inside and refresh my browser you guys can see that right now the title goes all the way from left to right and you can also see that all the content inside our website shift it around to make space for the title inside the top of the website and fast the way we could actually write this is if I were to go ahead and delete what we did here then instead I can go and say create column and say that we want to start a line one forward slash line three which means the right now we start at 1 and go to line three if I go ahead and save this go inside my browser refresh you guys can see it does the exact same thing now when it comes to the values inside the grid column or the grid rows we can also go and use something called span so for words that go back to 4 we have 4 4 I can actually go ahead and just delete the start and say we want to end the column by making the end spans two lines inside the grid so I can access a fan to save it refers to browser and as you guys can see you again get the same thing if it were two chances to a one then you guys can see it only spans to one inside the grid which means that it starts at line one which is on the left side then it goes to the second line which right now is inside the middle and then the third line is on the right side okay so now we talked a bit about how to make up constant a PN one line inside the website and the next thing I want to mention here so we can also do the same thing when it comes to rows so just like we had a grid column end and a grid column a start and a grade column we can do the exact same thing when it comes to rows so if we were to go down to the next line I can say grid - grow - end : semicolon and then I can tell span - so we're to go back inside the website you guys can see that now the title should appear in the second line down here as well so if we refresh you guys can see now takes up more space so now we just talked about a bunch of different ways you would actually place the content inside the grid but it can be kind of tough to remember all the different numbers and the columns and the rows so there's a much easier way for us to do this without having to worry about columns or rows so what I'm going to go and do here is I'm going to go and delete everything they've inside the title class and instead I'm going to give it a grid area which I'm going to set to title so right now I just named the title class title so I'm going to copy this because you want to have one for each of the sections inside out grid now I'm going to go ahead and paste it down four more times and then I'm going to go and change the name so we have the second one up here which is going to be named header inside both the grid area and inside the class name so we're going to go and say header both places now I'm going to go and change the third one to sidebar the fourth one is going to be content then the last one down here is going to be the footer so not only have all these sections with names we can actually go ahead and go up inside our grid and we're going to go ahead and define not just the columns but also the rows inside this grid some go down to the next line I'm going to say grid - template rose : semicolon and then I'm going to go ahead and set this one to one frame because I want the title to be in one line then I'm going to set one frame for the header then I'm going to set one frame for the constant and the sidebar and then I'm going to go and set one frame for the footer so not only have these defined we can actually go to the next line and say we want to set a grid template areas like so and then I'm going to go and go down to the next line right before we end off the semicolon I'm going to say double quotes and then this right here is going to be the first row inside our grid so right now the first row up here which is one frame it's going to be everything put inside these double quotes so what I'm going to go and do here is I'm going to say well we have two columns inside this grid here so I need to insert two items inside the double quotes now right now because I want the title to go from left to right all the way across I'm going to cover the grid area name down here called title paste it in say space and paste it in now if you only had one column up here I just need to have it once inside my areas down here but because we have two columns we need to insert it twice so I'm going to go and go down to the next line before the semicolon say double quotes because we have four rows inside our design here so we need to make sure we do this four times okay so on the second row I'm going to insert the header just like we did with the title I'm going to go and say we have another row and then I'm going to insert the sidebar as the first item and then I'm going to go and insert the content as the second item so right now the saipan the content are going to be next to each other inside our layout I'm going to go to the next line and then right footer space footer so now for what to go back inside the website and refresh whoops that actually make a typo here we need to make sure we have all the different classes your name so we need to say footer and now if we go back and refresh you guys can see the title goes from this to right the header goes from left to right the sidebar and the content are going to be next to each other and then the footer is going to be at the bottom here so what does the last force to do essentially is that we can go back them inside our areas and if I want to have two foot at the top here instead of at the bottom here I can go ahead and copy it and then instead of title I can paste it in and just switch them around like so so now the photo would actually appear in the top instead when i refresh you guys can see that now we have two footer at the very top and the reason that this is so incredibly cool when it comes to CSS grids is because the right now inside our template inside our HTML file the photo should not be allowed to be put at the top of our layout but because you CSS grids it allows for us to do this and sista round the content in a way that wouldn't be possible using the traditional way we do layouts inside our code so what we can also do it just to mess around with this for a little bit to show you guys a couple examples here for were to go back and put the title at the top instead is that we can also go ahead and say well this actually has the size bar go all the way down to the bottom as well so now the side bar is going to be on two rows and then the content and the footer is going to be on the right side of it let me go back inside and refresh you guys can see you can also do that as well so what about white space well what CSS grids not supposed to do when it comes to white spaces is them can actually go ahead and say well what if we want the header to just appear on the left side of my columns I can actually go and delete the right header and instead write punctuation so right now punctuation what that means is that it's going to not fill out the space over here so it's going to leave a white space which is also something that is really cool when it comes to these scripts here now let's go and talk about wrappers inside a CSS script because right now as you guys may have noticed the website goes all the way from the left side to the right side and in most websites we have a wrapper so if I were to go back inside medicine and just go back to our normal layout which is the title header sidebar and the footer so let's actually go and cover that over as well if you go back up inside our columns the way we can create a wrapper is if the word so instead of saying that we have two columns we can go ahead and insert two more columns inside the middle here so I'm going to edit the middle columns should have a width as 500 pixels like so and what we can then do down here inside areas because we need to change this according to what we have up here so we need to make sure we have four columns inside this areas down here so I'm going to say we have a punctuation space which was a white space I'm going to copy it down to all the columns then I'm going to go afterwards and make sure we have the same thing on the right side and then I'm going to go ahead and save it and refresh the browser so now you guys can see we have white space on the sides if we were to refresh the browser and just slide it from this to right you guys can see that the rapper actually works now the next thing I want to show you guys is how we can actually customize the grid Adams inside-out grid that were to go inside the browser you guys can see that if you were to take one of the grids for example the content the background call goes all the way from the left side to the right side so the grid takes up the entire space that we allow for it to have inside the browser now if you want to customize the position of the grid item I have inside the grid you can actually go ahead and go back inside our code and say let's go ahead and take the content and write a piece of code called justify jazz self colon semicolon and tell it that we want to justify to the left side of the grid so right now we can say start save it go inside our browser refresh and now I guys can see that the content or inside grid it's actually positioning itself to left side of the grid just taking up the space the content takes up inside the grid we can go ahead and do the same thing to the right side so I can actually go and say ends you can refresh the browser now guys can see it goes to the right side we can also censor it for writing Center now when it comes to doing the same thing but up and down instead we can go and use something called not justify but a lot and then the commands are the same thing as we did with justify you can use start and and Center now the next thing I want to talk about is something called nested items so right now as you guys can see we have the main grid over here with grid items inside of it and if you were to insert content inside one of these grid items like the content box down here if we were to go down to the next line and create a paragraph that as maybe a inside of it then do the same thing underneath here create a second paragraph that has B these would actually be what we call nested items now when it comes to nested items they're not actually part of the main grid we have up here which means that if we were to actually just go and delete the line itself we created over here because we don't actually need it and then save the files go inside the browser refresh you guys can see the right now the paragraphs will actually appear inside the content grid item now what do you guys will also notice is that all the heights changed and that's because the constant inside one of the boxes created another high for the content box because all the boxes has one fraction for the row measurements they're all going to go and change the cording Li so right down guys can see the nested items in here are actually not part of the main grid now what we can do is we can actually go ahead and create a second grid inside this grid here so if we were to go back inside my code I can actually make content too if we say display grid is we can actually go ahead and make it into a second grid and then the content inside the content grade item actually becomes great atoms of content so we don't have to stick with just one grid inside our design so our layout so we can actually go and use them over and over and over again which is a really nice feature when it comes to CSS grids so this one hadn't deleted everything again so right now we just have content inside the content grid item and inside the content class over here we don't have the display grid so the last thing I want to talk about is mobile responsiveness because using CSS grids becomes incredibly easy when it comes to mobile responsiveness so if I were to go ahead and go down to the bottom of my stylesheet and say we have a media query so we're going to say at media space screen and parentheses curly brackets and then inside the parentheses when going to a min - width colon and set it to 736 pixels so right now when we see the website inside anything larger than 736 pixels and width it's going to start adding the styling inside the media core which is basic HTML CSS so what I can do go up inside my stylesheet and copy the grid to behave up at the top here and paste it in inside the media query now what do you guys may have noticed is that when I did this I focused on making the desktop version the one that appears inside the media query so right now we don't need to make any changes to out grid because I think this should be the desktop version but if we were to go back up to the top grid I can actually go to make a mobile version so right now I can actually go and save it on one white space on the side here so just going to go and delete those and I can actually go ahead and delete the 500 pixels inside our columns used to adjust them to columns I'm also going to go and put the content on a separate line for itself so I'm just going to go down to the next line and paste it in twice and create a sidebar up here instead of the constant and the sidebar next to each other so what we can do now so I'm going to go inside the browser refresh and want to go down to cell phone' format you guys consider everything switches inside the cell phone view one more thing I forgot to mention is you can also create something called a gap so I can say grid - gap and set this one to 10 pixels mean there right now for were to go inside the browser refresh you guys can see we get a gap in between all different grids this also happens inside the desktop format so it becomes really easy for us to change the layout once we go to cell phone or tablet or to desktop just by using media queries inside our stasi which is something that's really easy to do and it allows for us to move around the content in a way that we couldn't do before which in my mind is one of the best things about CSS grids now I know there's going to be people ask me about browser support because this is one thing we need to address because I know a lot of people are going to be turned off by the fact that some browsers still don't support CSS grids at least as I'm making this video some browsers don't do it now when it comes to Internet Explorer Microsoft edge they don't right now as I'm making this video currently support CSS grids now Microsoft ads will support it in a couple of weeks from now or at least I heard so but I'm not so when it comes to Internet Explorer and I'm not even sure if it's going to support this in the future so some of you guys are going to be asking me well should we even do CSS grids when not all browsers support it at least right now now when it comes to viewing the website inside a non-supportive browser what you will actually see is the cell phone format of the actual website and a lot of experts actually going to tell you they want to do exit design and program websites that you should always focus on making it mobile first and then afterward focus on desktop so right now inside the stasi what you guys can see is that I did actually go ahead and support mobile first and then afterwards focus on making it into a desktop format and the reason for this is that if you were to view a desktop version inside a mobile phone then it's a lot worse than if you were to view a cell phone format inside and desktop and with that argument a lot of people will also tell you that mobile versions of websites do actually look better inside desktop browsers even though there's a desktop version available and the only way we can get all process to actually support this is if we do actually use CSS grids because it's still a new thing some people might be hesitant when it comes to using CSS grids but the only way we can get browsers to actually support this is if we start using it inside our web designs because then the people behind browsers are forced to implement CSS grids inside their browsers so this is basically all I want to show you guys when it comes to CSS grids I hope you guys enjoyed I'll see you guys next time

Channel: Dani Krossing

Views: 862,313

Keywords: css grids will change how we create website layouts, css grids will change how we do website layouts, the future of webdesign layouts only using css, how to create layouts using css grids, create layouts using css grids, css grids will change how we do webdesign, create layouts using css, a guide to using css grids, css grids introduction, how to create better layouts using css grids, css grids, css grid, css grid tutorial, How to create website layouts using CSS grids, css, html

Id: HgwCeNVPlo0

Length: 28min 0sec (1680 seconds)

Published: Sun Jul 30 2017