So let's go ahead and go into our application and let's go into cart content here and let's say that the display is grid, and the grid-template-rows is going to have a title, so title start to title end and then we're going to have the products start to products end. Then we have the footer start to footer end right, okay now the footer we already know it is going to be 113 pixels so let's throw that in, and the products we're going to say that takes up all the remaining space right and then the title is going to be a fixed space.

So let's go ahead and make sure that that title has that space, let's go see where it is. Okay so the title is going to be in the design whatever it is right, we're not going to put the 94 pixels in there. And then we're just going to put in the 30 from the side and 25 up and then we'll put 25 below it as well to give it a little space even though it wants like 50 it looks like, well we'll mess around with that okay.

So we'll say that the title start, hmm let's see. Let's just say 50 pixels and see how that looks, or 30 pixels sense that's the font size. And then let's go apply these now okay, and real quick we're going to put the twenty five pixels at the top, right, because we want that space so we want the space up above here. And then on the side we're going to want 30 pixels from both the sides right. So what we need to do is say that in here we have 25 pixels right there and then the grid-template-columns is going to have 30 pixels on each side.

The thing is I'll show you in a second but let's just put 1fr here and we won't worry about the columns, so just type out the columns. Okay, now let's put in the rows okay, we have a grid row, title start to title end, then let's copy that and put it in products and footer and then replace their names respectively, so products and footer.

shop-cart.scss

&__products {
    grid-row: products-s/products-e;
    display: grid;
}

&__footer {
    grid-row: footer-s/footer-e;
    display: grid;
}

Okay that should align it on the rows, let's go take a look and see what it looks like.

It looks a little messy, and that's because we don't have any columns, or we do have the columns, but it's basically trying to align everything on the 30 pixel column right. So we need to specify where these belong, so we're going to say that this is the start and this is the end, okay, and then we're going to say that this is the start and this is the end and then we're going to get rid of these because I don't want that to be the start and the end.

But the thing is we can't just say that everything belongs start to end right because if we do that, if we say grid-column: start to and even though we have that 30 pixels space right and you probably already caught it or you're probably wondering what the heck is the catch here, and I'll show you. It's the footer okay, we all have them going from start to end except for the footer now is not where we want it.

So we want the footer to extend across the entire content and not have that 30 pixels on the side, but we do want the title and the products to. So let's go in our code and let's say that the footer belongs from footer start to footer end and then let's just add those in before the 30 pixels, and then it's safe to say that this is where the rest of the content starts and ends right to make it clean and small code.

All right, let's go check this out in our application and see what it looks like. Okay so get an image of the design right, and then what it might look like, and let's go in here and it's looking really similar. Everything is the same except for obviously this content in here.

So one thing I want to change before we head on to the next video is, I want to put in the space here so we're going to just add in another, not a row, but we're going to put in some margin so let's go into our application and let's say that the title has a margin-bottom of 50 pixels.

The problem with doing this is that the title only has a 30 pixel row so it's not even going to look any different. So what we need to do is add 50 pixels to this 30 pixels so we'll say 80 pixels. Now what we need to do is go in Chrome and look at, see and it looks great.

Now one thing we need to do before we go on is add in more items and then get the scrolling working and that's really easy. And then you're going to see a problem with putting the margin on the title because it's going to cut stuff off and it's going to look weird but it's a really easy fix by using padding inside of the products component, so let's start doing that now.

So what we need to do is put more items in our array, so let's go to shopCart.js and let's say that products in here. Let's just copy this so it has more items in here okay. Put in a bunch of items like a whole bunch, I'm going to copy it a of bunch times. Now chances are it's going to adjust the height for all this and it's still going to fit but let's see, yes see how it still fits?

So what we need to do is we need to specify a specific height for each one of these. Now, this is going further into the actual component itself and if we do that here we're just going to end up having to do it again. So a better idea is to instead just have us develop this component in the next video and then we'll get to the scrolling.

Now that we have more content we can see that and it's displaying the correct number right. So what we need to do in the next video is design our model right, so the data, and then we need to get it into our application component here, then we need to calculate what we need right here and right here which we already have it doing so we don't even need to modify the cart one and then we need to start developing this items component that you see here which should be pretty quick.

So let's go commit our code.

Terminal

git status
git add .
git commit -m "created shop cart grid"

I'll see in the next video.

Resources

Source code