Fixing the grid

- [Instructor] Just switched back to our Figma file. If we remember what we had with the column layout, we made a 12 column grid which had certain widths and certain gutters on here, so 24 between each one. Now the problem that we have is when we go to smaller columns, and I've just made a quick example over here, we're using pretty much the same idea. So here we've got another 12 column grid, and it looks a little bit like this.

So we've got the 64 margin on each side, which is what we've added on the kind of responsive design, and then we've got a gutter, which is actually smaller, 24, but because we've got 12, there's hardly any room for any of the columns. So what do we need to do here? So what we might want to do is actually go down the amount of columns that we have. Something like four, for instance, might look a lot better at smaller sizes.

Maybe even something like two would make more sense as well. So what we're gonna do is actually reduce the amount of columns that we have in our layout. How do we do this? Well, again, if we go back to our code, and we see here that the layout's getting really broken when we get small sizes, roughly around about here maybe, about 660 maybe, this is where we want to switch things down.

So here what we're gonna do is switch things down in the same way. If we look at our code again and scroll back up, let's find where we set up the grid. So we set up the grid here in our section, we said display grid, and here is where the problem lies. We have a grid-template-columns, and we got 12 columns equal width. What we want to do is overwrite this. We actually want to have something like four, or two, or even one in this case.

So let's fix this. So here what we want to do is around about 660, we're gonna make a new media query just to fix these layouts, and again, I'm gonna add some space and below here, @media, round brackets because we're gonna add an instruction, the maximum width this can possibly be is 660 PX. So we need the PX in there because it needs to know it's pixels that we're talking about, and if we have this, we're gonna do this.

We're gonna do something using curly brackets. And again, just to make it easier to read, I'm gonna open up these curly brackets. What do we want to fix? Well, here we want to fix all the sections. We're gonna overwrite the section tags, and then we're gonna overwrite it and do something. What do we want to do with this? Well, we want to overwrite the grid-template-columns. So grid-template-columns, not repeat 12 times, we're gonna repeat it just four or three or two.

Let's do that, so grid template columns, we're gonna repeat a four column grid with one fraction. So each grid is gonna be one exact fraction, and we're gonna keep the gutters in place. Maybe we want to reduce the gutters actually just because we've gotten a little bit smaller. How big are the gutters right now? The gap is 32 by 32 in both directions.

Let's reduce that a little bit more. So the gap here is just gonna go down to 24 and 24. Let's see this in action, let's see what happens. So currently this doesn't really do much. It doesn't really change the site, because you haven't gone down that much, but once we hit the media query, you might notice that things start to break. Now the reason that things start to break is this now starts to break the grid because we have things in here that span more than four columns.

So for instance, I scroll back up, I can see in here there's lots of things like grid-column five. We have five in a four column grid, so we have to go and fix some of this stuff. So the first thing I'm gonna fix is my section H1, the tagline area, which is actually up here. This is off center now. So previously this was starting at two, span 10. We're gonna fix this. So I'm gonna go into my media query.

Still within my media query, I've still got this in here, I'm grouping this together. I've got my section H1, and this grid-column is gonna start at one and span four. So it goes across 100% of the way. So let's see this in action now. This looks a lot better now. So what do we want to do with these sections down here? Well, the same thing, we want to fix things. So we might want to just do the same thing.

My section H1 is gonna go the full way across. So what I want to do is take, well, all of this stuff really, my section with the project, insert there, it's a div.artwork. This is the same, I want it to span the four columns, so I'm gonna take this, and this, and this, and this, and this, and this, and do the same thing.

So what I'm gonna do is actually just have all of this be another four column grid. I've got this here, so rather than just repeat myself, I'm gonna actually add more styles. So here I'm gonna do a comma, and then section.project div.artwork. And this is just from above, I'm just overwriting this together. As you can see here, it doesn't, it fixes this one.

This one is actually a different one, I'm gonna fix that a little bit later. So we've got this artwork being fixed. What else do we want to fix? We want to fix section.project div.description. Let's fix that one. Comma section.project div.description. So watch the space in here, I don't have a space in here. I do have the space here, and there's no space there.

So now this one fits here. Looking pretty good. Now I can do this on the About page as well, so again, my grid is broken. Let's fix this on here too. How do we fix this? Well, the same thing. Now just to make this not all be on one line, I'm actually gonna press Enter, and Enter after the semicolon just to make it a little bit easier to read.

Here I'm gonna do a semi, I'm sorry, a comma, and then underneath, what do I want to pick? I want to do section.about, the photo. Gonna put this in here. And the same thing for the description in About as well. So that is here. Gonna take that, and put that in here too. So let's see how that looks on the About page. Much better.

Let's see the Contact page. Again, this is broken, we want to fix this here. How do we fix that? Well, again, let's find where we set this layout. We said here, the section.contact div.form. So again, just gonna put this in here. Gonna do a comma, and put this in. So you can see it's very easy to break this grid, and it's very easy to then reset the grid. We don't have to do one span four, we can actually really kind of work out the layout itself, but what we should see now, even in a smaller way, these get fixed really, really quickly.

Now there's other things you might notice at smaller sizes. So if we go really small, for instance, this navigation starts to break again. Let's actually fix that on the next video.