- Read Tutorial
- Watch Guide Video
Now, if you go to our grid tools and you select just the home grid you can kind of see how we have laid things out. Now, what I want to do is introduce another row here and basically have this one start at the start of that column. And then we will have this stuff(Course Library) end at the end of the first row.
To put that more clearly we're going to have my schedule start at the end of that row and we will have library end at that column. So schedule start at that column and library end at that column. Okay so its a 50px column.
Now, this might fix the error, well I'm pretty sure it will. But there's another thing that might fix it immediately either way we're going to make a refactor to the rows because its a cleaner way of doing things without margins.
Let's just try out the method first that will most likely fix it immediately so let's go to libraryCourse.scss and let's just change the Z index say the z index is something like 50, because part of the problem could be that its not recognizing it after we move off that hover.
So now it's recognizing it, by saying 50 we have ensured that this is basically at the very top of our list here so thats how thats working. Now what I want to do is make that grid change just to clean up our code a bit. So I'm going to select home and now we just have three columns here.
And our course library is spanning over the left two as you can see at the top of my screen those two purple things.
And the last one we have is the schedule okay. Now its kind of bad to do what we're doing with the margin here, I wouldn't say its bad just more hackie. It would be cleaner to have another column and have it be part of our grid.
So let's go ahead and I'm going to put our dev tools in the background but have home selected still and lets go into our library.scss and introduce another row. Okay so looks like we have to do this in our main.scss my bad. So we're going to go up here under .home and all we're going to have to do is say okay library end we know it's going to have to come after schedule so I'm going to introduce a 50px column.
When we do this and go into our application it's going to mess a lot of things up. Okay, not yet but you'll see we have this 50px column so basically all we have to do is say okay we want this one to start here now and this one to end here still like it is.
Super simple but its going to make things messy. So we already are specifying that we want it to start at, and this is a really good reason you should name your grids, is because now we just have to move the grid names. Because we know its going to end at library end so we can just move library end over here actually and then we can just move schedule start to start over here.
Max will be changing the code to this but switching it back in just a minute
main.scss
.home {
height: 100vh;
width: 100vw;
display: grid;
grid-template-columns: [library-s] 1fr 1fr [scheudule-s] 50px [library-e] 1fr [schedule-e]
grid-template-rows: 1fr;
}
So now when you look at it, its all messed up
but standby and what I want to do really quickly before we continue with this is get rid of that margin so I'm going to swap the library and schedule start/end back. So all we've changing so far is adding in this 50 pixels in between library-e and schedule-s.
Okay so lets go into library.scss and remove the margin-right: -50px;. Now lets go back to main.scss and check out our grid, and okay cool this looks like what I was expecting.
I was wondering why it was not doing this initially and its because we didn't remove our margin. So right now we just have that extra 50px column and we want to remove it. And I'm probably going slow, or slower then you are used to. And thats because I'm trying to really explain what I'm doing here so you understand grid.
Okay, so let's swap these two schedule start and library end. It's really pretty self-explanatory here, we're just saying okay we want schedule to start before this 50px and we want library to end after it.
And you will see that this messes things up quite a bit.
But you'll see that it's kind of going in the direction that we want. We have the course library ending right next to my schedule they are just not in line right now. All we have to do now is put them on the same row. And thats the thing we never specified which row these belong on we only specified what column they are on.
Now, what we did with the library was put it in its own file while we left the schedule here in the main so what I want to do is just copy these two things. I'm going to take gradient and I'm going to cut that I'm going to go into style a new file and I'm going to say gradient.scss. and paste gradient in there.
gradient.scss
.gradient {
position: absolute;
height: 100%;
width: 100%;
background: linear-gradient(120deg, $color-purple 0%, $color-light-blue 100%);
z-index: -10;
}
And this has nothing to do with our placement I'm just cleaning up our code. And then for schedule I want to cut that and create a new file in style called schedule.scss. Okay actually it looks like we already have an schedule.scss so what we want to do is "Oh how strange, we already have .schedule in here. Okay so this code is not overriding anything so all we have to do is place our new code in the existing .schedule so it will look like this.
schedule.scss
.schedule {
grid-column: schedule-s/schedule-e;
position: relative;
height: 100%;
width: 100%;
display: grid;
grid-template-rows: 100px repeat(auto-fill, 75px) [progress-s] 76px [progress-e];
grid-row-gap: 22px;
}
Now I don't think we put library in two tags like that but let's double check that and yeah we didn't we are good its all in its own tag just like we did with schedule. Anyway lets get back to the styling, all the styles should be the same although a lot of our styles are missing because we're not importing all of our style files.
So let's go into main and lets say import gradient, and I'll just put that below variables.
main.scss
@import 'variables';
@import 'gradient';
@import 'library';
@import 'libraryCourse';
@import 'arrow';
@import 'schedule';
@import 'scheduleCourse';
@import 'progressTracker';
@import 'addRemoveAction';
.home {
height: 100vh;
width: 100vw;
display: grid;
grid-template-columns: [library-s] 1fr 1fr [scheudule-s] 50px [library-e] 1fr [schedule-e]
grid-template-rows: 1fr;
}
okay so everything should look the same, I just wanted to fix that up a bit. Now, lets get on to the rows, we never specified which row these belong on. So let's go ahead and specify that now in the schedule.scss and right below grid column lets say grid row: 1/-1. The reason I'm doing negative one is because we want it to always extend to the end of the content.
Now we can just say 1/2 to because we know that there's only two rows here but in the future, if we change anything we want it to always extend to the end, so if we added another road we don't want to mess that up we just want to take them to the end.
schedule.scss
.schedule {
grid-column: schedule-s/schedule-e;
grid-row: 1/-1;
position: relative;
height: 100%;
width: 100%;
display: grid;
grid-template-rows: 100px repeat(auto-fill, 75px) [progress-s] 76px [progress-e];
grid-row-gap: 22px;
}
Okay, so lets's copy that and let's head over to library.scss and do the same thing
library.scss
.library {
grid-column: library-s/library-e;
grid-row: 1/-1;
display: grid;
grid-template-rows: [title-s] 100px [title-e course-s] repeat(autofit, 1fr) [course-e];
grid-row-gap: 22px;
padding-left: 100px;
padding-top: 100px;
&__title {
color: $color-blue;
font-family: $font-alegreya;
font-size: 34px;
font-weight: bold;
border-left: 2px solid $color-blue;
padding: 20px 40px;
}
}
Okay, now we are specifying that they belong on the same exact rows. So now this hovers over it really cleanly and it looks really good. Although you will see that our content in the my schedule is not looking good because it is hidden behind the course library cards.
But that doesn't matter because we're going to center that in the next videos anyway, well we are going to move things around. So let's go ahead and think about how we want to do this, now what we could even do is place schedule exactly at the end as well. We could place schedule at the end and then take the gradient and place it there but I don't think I want to do that.
So let's just end this video here and we've got all these styles in, and you will see we have that 50px row in there now which is kind of cool and everything's looking good.
So what we have here is all of our styles and all we need to do now is finish the styles on the schedule and then do a little bit with the overflow and the progress tracker. So lets commit our code.
terminal
git status git add . git commit -m "put 50px column in main grid"
Okay, I'll see you in the next video.