Let's go into our application and let's close out shop product, and let's close index.html. Let's go into shop and let's say &__title. Okay, I don't know what I'm doing in here, let's get out here. Let's go to shop-product.scss and in here we just need to basically make a grid.

So let's say display is a grid, grid template rows are going to be title start to title end. All right, then we're going to have description start to description end, then we're going to have the bottom right, so the footer, so footer start to end.

Now let's go reference our application design and see what looks like. Okay, we got the price too so I forgot that, that's going to be about 24 pixels or so, I'm going to put like 25 pixels. So let's put before the footer we got price start to price end, okay I put the spaces in the wrong place. Okay, 25 pixels or so and then we got the footer which is going to be about as high as this so 65 pixels.

shop-product.scss

.shop-product {
    height: 314px;
    width: 240px;
    background-color: white;
    box-shadow: 0 2px 20px 0 rgba(0,0,0,0.1);

    display: grid;
    grid-template-rows: [title-s] [title-e description-s] [description-e price-s] 25px [price-e footer-s] 65px [footer-e];

Now I want to put in the gap here as well, so let's see, I guess not we can include it in the grid row gap. Now the height of this is going to be about let's just say 30 pixels for the title. So the title is going to be 30 pixels and the description is going to be 1fr that's going to contain most of the content and we want that to fill up the rest of the space. Okay so let's go through and let's say grid row is title start to title end, all right, now let's copy this and put this in all of these OK let's put this up here.

We got the title description and the add to cart and the quantity box we'll say &__quantity and say grid row and then now let's modify these okay. So descriptions going to be description obviously, quantity is going to be footer and add to cart is going to be footer as well. Now price is missing, so let's throw price in here let's say and price and I'll say grid row is price to price.

Now we need to define the columns okay. Let's check out what this looks like before we do that. So everything should be aligned except for add to cart and this are probably going to be overlapping almost okay. So that looks good but the columns are messed up.

So let's define some columns. Let's say grid template columns and to be honest I'm just going to put 1fr and I'm going to put end okay, because we can use justify self to our advantage so let's say that. And now let's apply this to all of these, okay so let's say & > * grid column start to end. And then on add to cart we'll say justify self is end, and on quantity we'll say justify self is start, as a matter of fact we'll add justify start to all of them. Then by saying justify items because that way it will apply to all of them, but then when it reaches that the cart it will throw it to the end, see it looks great.

Now one thing I want to do is we need to add in some padding. Now we could add in padding or just add in columns, thats what I want to do, I also want to add in a grid gap of like 5 pixels. So let's quickly just say that there's a grid gap in here of 5 pixels and see what that looks like, a very slight difference but it pushes things apart. I'm going to put a grid row gap of 7 pixels.

Now what I want to do is I want to basically say align item is center, so this will center a bit better. Well it looks like it's closer to the title right so we want to do that. Now we want about 13 pixels and 17 pixels that should be the same so I'll say 15, and then the bottom is 15 about, and then the top is about 15 so we'll just save 15 on every side.

So on template rows, we'll say 15 pixels and we'll say 15 pixels on column, so after the start and end, then over here we'll put 15 pixels that way we'll have that 15 pixels automatically and it'll subtract that out of 1fr. Okay, let's try this out now, alright it looks really clean actually. I'm surprised with how good this looks.

Okay so we need to do now is we simply need to put this on a grid of 4x4 right, kind of like that and then we'll get to the front of it, this is a big component. So what we want to do is we want to look at our application and let's go do that now. So let's go back to our code and let's go to our shop.scss and let's say display is grid, and real quick we want to make sure this is applying to the products, so let's say &__products. Then let's go to shop.js.

All right, so we have products that's good, then we also have search bar. So what we can do is say &search bar &products. Once we get the products we'll do the shop grid. So display is grid and grid template columns is repeat auto fit MinMax 315 pixels 1fr. How big is that? Let's go check.

shop.scss

&__products{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(315px, 1fr));
}

Now that you had a second to type that in, let's go to shop-product.js and the width is 240 pixels. Let's try this now, I'm not guaranting that it will work but let's see. Oh it looks pretty nice except for there's too many pixels or too many items here.

So what we want to do is we want to change this from auto-fit to auto-fill okay, we need to define a width that's why it only fits about that many pixels. So what we need to do is say products has a width of 240 pixels times 4, but then we need to take into consideration the gap as well. So we have 960 and then the gap, what's the gap in here? Should be about 10 pixels at least, so let's say grid gap is 10 pixels. Now let's see what happens. It puts them a part a bit.

Now what we need to do is we need to say width is 960 plus 3 grid gaps because theres 4 item so there is going to be three gaps. So 960 plus 30 is 990 so let's say width is 990 pixels and you'll see it only fits 4 now.

Now we just need to center it and maybe pull them apart a bit because it really doesn't look that good with all of them so close together. So let's say justify content is center. Okay that didn't work, let's say justify. Well really it's going to be justify self but we don't have a grid yet on the shop. So it's probably not going to work, right. See how it doesn't do anything? But when we add the grid it's going to work and I'll show you when we get to that.

So let's just give it a bit more of a grid gap, we'll say like 25 pixels and then we'll have to add that to here so we'll say 960 plus 75 so 1,035. Okay, now this looks good, but you can only go so big. So what we need to do is say max-width, so it can only extend that far which means it will only grow to 4 but that it can be less than that, so it will kind of reduce that. Okay, so really nice and makes that much more mobile responsive.

We just have like a few things we need a change. Once we get the center correctly on our grid all there is to make mobile response on this page is the navbar, and we could set that up the same way that we did here. But anyway let's go ahead and let's put these in the center here. We need to find a grid for our entire shop, so let's say on shop we have a display of grid and we have grid template and rows of search bar start.

So search bar start to search bar end and then we have products start to products end. Okay so products end is going to take up 1fr, and then we're going to make this the height of the search bar which is 38 pixels. And then what we need to do is account for the the difference here because we've got a grid gap of like 57 pixels.

And then this has like 30 pixels so what we need to do is we need to say 37 pixels on the top and then we just need to say grid gap of 57 pixels or however many it was. So go ahead and write that in, I'll give you a second to write it in.

shop.scss

.shop {
    grid-row: content-s/content-e;
    grid-column: s/e;

    display: grid;
    grid-template-rows: 37px [search-bar-s] 38px [search-bar-e products-s] 1fr [products-e];
    grid-gap: 57px;

Let's go to Chrome and yeah we're looking good here. One thing I noticed that this is a grid gap of like 40 pixels. So what I want to do is go back to the product's grid and let's just say grid row gap is 40 pixels. So the grid column gap is going to be 25 pixels but the grid row gap is going to be a bit bigger. So let's go see what this is looking like. We havent aligned them on the grid yet but, it's going to take the search bar in the 37 and it's going to try and put products in 38 so that's not going to look good but let's go see if it does that.

So as far as I can tell didn't do that, I don't even know, but let's go ahead and let's apply it manually so we know for sure. Let's say grid row is search-bar-s over search-bar-e and then for products we want to put grid row is products-s/products-e. Okay go ahead and type those in and let's go to chrome and check it out.

Looks good except for we have a problem. The problem is that we have 30 some pixels here but it's probably trying to add a gap in on to the top, so let's get rid of that and see what it looks like, oh maybe not, maybe that's just how big that is. Seems not that big, 30 pixels, I think I put 37, but still that doesn't seem like much more. Oh I know what's wrong, it's that it's aligning at the bottom because I was putting the gap in here maybe it wasn't, I don't know, let's just put like 15 pixels.

Strange, well first things first we need to give it a column so let's say grid template columns is 1fr and we'll say end and start, then we'll just apply that to both. Okay, let's go try this. Why is it doing that? Let's change this back to width, oh I know why, if I save this it's going to go back. Okay, so basically we're never defining a width any where, we're just saying 1fr so it's saying Okay well it's supposed to be at least 240 pixels right. It can be 25 but at least has to be 240 pixels, 1 for 240 pixels.

So what we need to do is we need to define this as MinMax and we need to say hey the minimum can be like a 100 pixels but the maximum can only be 1035 pixels okay. Now that might just automatically default to 100 pixels but we'll see. Yes, it's defaulting to 130 pixels, so let's say 1fr here and see what happens. Dang, okay let's just put 1035 pixels and see how that looks. Dang, okay what we need to do is, let's do this, let's go back to the MInMax of 100 pixels and 1035 pixels.

Then what I want to do is change the max width so let's comment that out and say width 100 percent because then it's just always going to adjust with this, so whatever width this column is, it's going to be 100% of that width, so let's try that. Okay so it's working.

So now what we need to do is we need to center everything we need to center these products here and we have justify self as center but for some reason it's not centered. So I'm going to inspect the element and I'm going to pull this window over quite a bit, there we go. Let's see, why is it not centered? Okay it's cuz the content is 1035 pixels but it's not centered. So we need to say justify content to the center, there we go.

Still it's off. Oh I know exactly why, so when we added the padding to this, it pulls this search box over a bit too. So really what we need to do is we need to not apply padding there except for that's kind of a mess, we don't want to deal with that. So what we need to do is translate this over how ever much padding we put on the search.

So let's go ahead and select the search bar let's see the padding we put. We put a padding of 20 pixels I guess, I'm going to change this to 0px, it wont let me change it, okay what ever let's go manually change it. So let's go to search bar, okay so in shop-search-bar.scss we have this 20 pixels. I'm going to remove that and see how it effects it. Okay, I'm going to remove it on padding left 50 pixels, that's it. I'm going to put the 20 pixels back there and remove the padding left of 20 pixels on the input, lets see how that effects it. See how it's right there now.

So kind of irritating but it's what we're dealing with okay. So what we need to do is we need to do is, we need to think of a way we can solve this. Maybe if we put 50 pixels at the end of this column it will solve it. Let's put 50 pixels there and see what happens. Oh, it looks like it fixed it, basically the component still extends over here but by putting 50 pixels here we're kind of hiding that 50 pixels. So this is technically not the whole width, this search bar is not the whole width of that component, but we're overwriting it by saying that the 50 pixels is there.

Let's comment it out and let's get rid of that 50 pixels and see what it does. It should bring it back, you see how it brings it back? That's kind of cool. So let's go ahead and keep that in there, 50 pixels in the shop-search-bar.scss, that's all we changed in his file was adding the 50 pixels there. Okay so that's excellent, let's go back to our application. We have this all set on here and it looks great okay. We have our products and everything's great.

Now, it's kind of a problem though because we don't have the front so what we need to do is we need to make it so this front exists. But then when we hover on it, it will flip over and show the back. So in the next video we will handle the front and then we will talk about how we can get this effect.

So let's go ahead and look at our app one more time okay, it looks nice. Let's go ahead and commit our code and then in the next video we'll start getting that done.

Terminal

git status
git add .
git commit -m "built a lot of shop grids finished back of shop product component"

Okay, I'll see you in the next video.

Resources
Source code