CSS Grid Course: Positioning Items

Key Takeaways

heyyyyyy in this screencast you're going to learn how to adjust the position and size of the items on the grid which is critical to know in order to create real-world websites with CSS grid we're going to create a mock-up for a website and here in the index.html you can see the mark-up for that as you can see we're targeting each of the items using a class name header menu content and footer to start with we have this 2x2 grid each of the columns are one fraction unit so they're responsive as you can see and each of the rows are 40 pixels tall for our website though we're going to need three rows as we want the header to take up the top row the menu in the content to being on the second row and the footer to be on the third row all the way at the bottom so let's create a third row here let's place in between the two existing rows and give it a height of 200 pixels as you can see now the header and the menu is on the top row on the content and the footer in the second row and our third row is blank as we haven't filled it with content yet since our items only take up the first four grid cells so let's change that we'll start by targeting the header and making it span from the left hand side all the way over to the far right-hand side to achieve that we need to head into the dot header and give it a grid column art set that one and also give it a grid column and ak3 as you can see now the header spans across the entire first row and what we're saying here is that we want the header to start at the first column line and end at the 3rd column line and you might wonder why we have three column lines when we only have defined two columns well that's because the first column line goes from top to bottom on the left side of the grid the second column line is the one that separates the two columns and the third is the one that goes from top to bottom on the far right hand side of the grid so when you have true columns you have three column lines and you can write that like this alternatively though we can also use the shorthand method which I prefer let's remove this line here and also remove - start rather do one for 1/3 as you can see it give us the exact same result let's also do the exact same thing with the footer but now the footer also spans across the entire width well clinically we could have written this in a different way we could have done we could have done one /span - I don't give the exact same result what we're saying is that we want the footer to start at the first column line and span across two columns and finally there's also a third way which is to write minus one that'll target be very last column line now that we know that we want our footer and header to span all the way to the last column line we can do that with both of them and take the advantage of the fact that in the future you might not know how many columns we're going to have in this grid as we can change that however you want so this is a nice little trick when you don't know exactly how many columns the item will span across in the grid and to prove that point for you I'm actually going to change the amount of columns we have in the grid right now because we don't want the menu here and the content to take up an equal amount of space in the width that doesn't make sense we want the menu to be a narrow sidebar on the left-hand side here and we want the content to take up much more space and we could do this without adding more columns by simply doing one fr for fr for example now you can see that the content takes up much more space since the second column is for fraction units and the first column is only one fraction unit however this is not a very flexible way of doing it because now we're still stuck with two columns on a website layout and you normally want a lot more columns than that in order to have the flexibility to shuffle around and change the content so what I'm gonna do instead is use repeat give it twelve columns each of one fraction units now the menu and the content one fraction unit each in other words one column each and they're actually forcing the columns to be as wide as they need in order to display their content or just the descriptions we've added inside items in order to make this look nice again I'm gonna head into the content class and give it a grid column we know that it starts on the second column line two and we want it to go all the way final column line like that so we're gonna do minus one now we have a twelve column layouts instead of a two column layout meaning that we have much more flexibility if you want to shuffle around on stuff and notice that the footer and the header still spans across the entire width which is solely because we're using the minus one here if we had stuck with the three here and here that wouldn't work at all so let's change it back to minus one now let's also look at the grid row property as we're going to need that if we for example want the menu here to span all the way to the top in order to do that we first have to change the header though as we need to make the space here available this little grid cell here needs to be available for the menu so we'll change it to two now we have a blank cell here meaning that we can head into the menu class and give it a grid row and set that 1/3 meaning that it spans from the first row line to the third row line as you can see took up the spots here in the top left corner because this is the first row line this is the second and here is the third the fourth then is of course the the bottom line okay so before we jump onto the next screencast I would recommend you to for example try to make the menu span all the way to the bottom or alternatively make a pair on the right hand side instead of on the left hand side then in the next screencast I'm going to show you a really cool way of defining layouts which gives you a lot of flexibility in terms of shuffling around on the content and experimenting so stay tuned and I'll see you there