It's really nice in Firefox so you can just watch me do this, you don't have to do this. So I've opened it up and I'm going to inspect the element in Firefox, and it pops this up okay. You can see that we have all of our LibraryCourse, because we did the unique ID's.

I wish I had opened up Firefox while we were doiong that because it is an easier way to see these, but we saw them in the code anyway. So when we click on it, you'll see that it adds a grid. So basically what we want to do is refactor our grid and move our plus button to the right. Now it's not going to look perfect, but that it our first step we are going to take. So let's go to our code.

Let's go to libraryCourse.scss. Let's scroll up to the grid. Right now we have:

We want to update our grid to say:

Now we got this plus button over to the right. So let's go into our code. Under actions, we can update our code to:

libraryCourse.scss

&__action {
    grid-row: 1/2;
    grid-column: 3/4;

    justify-self: end;
}

Then at the top, we want to put:

libraryCourse.scss

.library-course {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 80px 1fr;

    align-items: center;

}

Doing that will center them all. Now, we might change it back depending on what the overall grid looks like at the end of the video. Now, for the down arrow let's look at our design and see where we want to place it. So it's going to be be somewhere over here.

So this end part has a width of 32 pixels right, and then to the end of 13. So 32 + 13 is 45 and then it looks like it's probably and it most likely is exactly 13 pixels on the left here. So basically it's about 58 pixels. So that is how big that we want to box here right, except for then we would have to make tis one a certain size too. So let's click on this and it's about 60 pixels right which means if we make this one 58 pixels, then that means this has to be 60 - 15 so 45 pixels. So let's say:

Let's go ahead and look where we are placing these on the grid columns. Let's see how it looks. We have a problem, and it's that our grid doesn't extend all the way to the end so it's kind of throwing this off a bit still. So what we should do is get rid of this padding on the right in bottom, and possibly even the top for now. So let's go into our code. So we have this code her, and we are saying 25 pixels on the padding. Ok, so lets get rid of that for now.

Now that's right place, but we want to center this item. So let's go into our code here and say:

libraryCourse.scss

&__action {
    grid-row: 1/2;
    grid-column: 3/4;

    justify-self: center;
}

Now it looks like we've kind of destroyed where the line is, but we got the plus and the button in there for now.

Let's look at our design and see a couple more things. So there are a couple things that we can do. So I guess one thing right that we could do is we can reduce the width of what this button is supposed to be, or we could add height to this. So on our first column, we could just make another column and have it be a spacing of 25 pixels.

Here's what we will do: this is 16 pixels from that, and this is about 24 pixels widths. So a total of 40 pixels. So let's go to the check and make it 40 pixels. The problem is they are in the same thing celebrities, so what we will have to do is apply padding to the check about 16px to the left.

So let's go into our code where we put the check. I remember that we called it something else, so let's just say:

libraryCourse.scss

 `&__icon {
    color: $color-blue;
    padding-left: 16px;
    font-size: 24px;
 }

Now our title is wrong now. We need to move it over a bit. So let's go back to our code and put in some padding:

Then lets make some updates to our code at the top, and then we need to make a new column for our line

libraryCourse.scss

.library-course {
    display: grid;
    grid-template-columns: 1fr 45fr 58fr;
    grid-template-rows: 32px [line-s] 44px [line-e] 1fr;

    align-items: center;

}

Now we have all these grid row sets, so we need to be specific when we are putting the line, and the description. So let's say:

libraryCourse.scss

 `&__line {
    grid-column: 1/-1;
    grid-row: line-s/line-e;
 }

and

libraryCourse.scss

 `&__description { 
    grid-row: 3/4;
    grid-column: 1/-1;
 }

So that looks really good, but it looks like it extends too far. So here's what we got to do: we need to update our paddings and give padding to $__line and &__description:

libraryCourse.scss

.library-course {
    display: grid;
    grid-template-columns: 1fr 45fr 58fr;
    grid-template-rows: 32px [line-s] 20px [line-e] 1fr;

    align-items: center;


    &__line {
    grid-column: 1/-1;
    grid-row: line-s/line-e;
    padding-top: 19px;
 }

 &__description { 
    padding-top: 24px;
    grid-row: 3/4;
    grid-column: 1/-1;
 }

Now what we want to do is hide this line when we close the animation. So we are going to have to do that in javascript. So let's look at what we can do in this video to close it off and get onto that. Well, that looks good for now so let's move onto the next video where we will continue styling this, after we commit: so git status, git add ., git commit -m "re-styled grid for library course". Then git push. See you in the next video.

Resources

• Source Code