CSS Grid Course: Named Lines

heyyyyyy in this screencast you're going to learn a new way of positioning and sizing the items on the grid using something called named lines so we have to find our normal grid here which is the website layout you should be familiar with by now though in this case we're defining it in the very simple way of only having two columns one being one fraction unit and one being five fraction units so we're not using the flexible twelve column layout here as this setup makes it easier when you sing named lines so to brush up a little bit the grid has column lines and row lines and the first column line is the one on the left hand side the second one is one separating the two columns and the third one is the one on the far right hand side and our content item for example is defined to span from the second row line to the third row line from here to here in our code that will be from the line that goes in between here and until the line that goes here so what we now can do is we can add a square bracket in between and write confident start for example on the third line write confident and like that now what we can do is we can swap out the number two here with content start and the number three with open end like that as you can see that works fine if we wanted to do the same thing for the header we'd have to give a name to the first line as well up here let's call that main start so now the header spans from main start to content end however I actually want to call this line main end as well because there might be a case in the future where we're going to reference the main end explicitly not use content end as a proxy for it so so let's just add a new name here paint and like that could give it a space and then the new name now we can do main art mane and as you can see works perfectly fine the footer can get the exact same layout like that now let's also name the rows using the exact same convention will do main start I'm just going to copy them I'm going start end and main end like that now you might wonder why we've been using this - syntax here and that's because they give you a little bit of magic now given that we've called this line here for content start and this line here for content end the grid knows that this is the content column or columns if that was the case so you can actually set the grid column to just content like that and as you can see it works now the header and the footer spans from main start to main and so we can do the exact same thing there as well just use grid column main and to take this even a step further actually we can also use grid area in one of these cases that'll be in the content case because let's have a look at the content lines both the row lines and the column lines so we know we have the content start here and the content and here though we also have a Content start here the second row line first second so this one here and we have a content end on the third row line the third one here meaning we have boxed in an area with content lines here here here here and here and now we can actually use grid area which you which you might remember from section one of this course are simply different grid area and set it to content like that and it still works however you might be tempted to try and do the same thing down on the footer though that wouldn't work because it has to be boxed in by four main lines though the main start row line is the one that starts up here not down here above the footer so here we have only kind of boxed it partially in we have the main start column line here which is the start of the footer and the main end row line just the bottom of the footer and the main end column line which is the right-hand side of the footer though the top of the footer is the content and line so we can't use grid area main here as you can see it breaks the entire layout so be careful and make sure that you have properly boxed in an area before you start using grid area okay now is it for this bonus screencast thank you