- Read Tutorial
- Watch Guide Video
Let's go to Firefox or at least I'm going to. You can use Chrome still if you want or whatever you're using. I'm just doing this to show you the grid and show myself the grid to help fix these problems. I always recommend using Firefox for grid because it's so nice OK.
Firefox for anything else is absolutely useless. So we have our items and we have our descriptions in our items. That's so cool looking. What we want to do is we want to have these start and end in their rows. We want the title to end in its row, we want the tenant unit to start in its row so that they squeeze up together and look more like our design.
This should be pretty easy. Let's go ahead and go to our code. Let's go into tenant-unit in our grid styles in requests-item.scss. Let's say:
requests-item.scss
&__title {
align-self: end;
grid-column: title-s/title-e;
grid-row: title-s/title-e;
}
&__tenant-unit {
align-self: start;
grid-column: title-s/title-e;
grid-row: tenant-s/tenant-e;
}
That should fix that. Let's check it out. You'll see it pulls them together, and that looks really good.
The next problem we have is this arrow, and what we want to do is get it over here. So instead of doing any fancy styles, what I want to do is just throw it in with the title. Let's go ahead and let's do that. Let's go to our code. It's going to take a little bit of refactoring but not too bad.
First thing I'm going to do is comment out the arrow here, so that we don't have it on grid anymore. In Firefox, it's going to go somewhere else and maybe mess a few things up, or go right where it belongs. It's the only thing that isn't specified where it belongs, so it fits in the remaining space.
What we want to do is include it in a div with this title. So what we'll do is we'll make a div with the same name as this title, and then we'll put that in with it. Let's go to our requestsItem.js. Basically, we're doing a similar thing with what we're doing with description here.
requestsItem.js
render() {
return (
<div className='requests-item'>
<Icon className='requests-item__icon' icon='fas fa-exclamation-triangle'/>
<div className='requests-item__title'>
Yo my door fell down
<Icon className='requests-item__arrow' icon='fas fa-sort-down'/>
</div>
Let's take the arrow icon and let's throw it in with the title, and let's just see how that reacts.
Let's see if we have to change anything. That might work as it is. You'll see it's a little messed up now. Let's look at it in Firefox and select one of these items. I'm going to select this middle one.
Basically, you'll see that it pushes the title up. What I want to do is give the title a grid, and do exactly what we're doing here. We could even just give it a flex-grid. I'll do that to show you how we can do that instead of a grid.
Let's go in here, and what we want to do is put this text in another div. So let's put another div here, and paste that in. Then what we'll do is we will look at our requests-item.scss. Down here in our styles, we have __title right?
We don't really need to change that because it's just going to inherit it. Let's be careful and do that anyway. Let's say:
requests-item.scss
.requests-item {
&__icon {
font-size: 3rem;
}
&__title {
&__text {
font-size: 1.8rem;
font-weight: 500;
line-height: 2.3rem;
}
&__arrow {
color: $color-gray-4D;
font-size: 2rem;
}
}
Now, this is just to be specific. It would probably work exactly how it is if we didn't change anything, but I want to be really clear here in our code. We have to go refactor our JSX a tiny bit. Let's go into requestsItem.js and let's give this div a class name.
requestsItem.js
render() {
return (
<div className='requests-item'>
<Icon className='requests-item__icon' icon='fas fa-exclamation-triangle'/>
<div className='requests-item__title'>
<div className='requests-item__title__text'>Yo my door fell down</div>
<Icon className='requests-item__title__arrow' icon='fas fa-sort-down'/>
</div>
That should work great. Let's go in our requests-item.scss, and let's change one more thing. We have our title__text and title__arrow in here now. Let's go up to our grid here. Let's get rid of the arrow comment and under title we'll have to make it a display of flex. Let's say:
requests-item.scss
&__title {
align-self: end;
grid-column: title-s/title-e;
grid-row: title-s/title-e;
display: flex;
flex-direction: row;
}
There we go, that's what I was expecting. It's kind of weird, with grid if you say grid-auto-flow, if you do column it will put it in a column-axis. If you are on flex-box and you do flex-direction: column, it will put it on a row-axis.
Let's select one of these items and it looks like it might not. Let's try column and see how it reacts. If you did column the grid it would put it in a column-axis. So it can get really confusing.
Remember how we have this grid here. Right. You'd expect it to have the same flex-direction as this. You'd expect it to have the opposite of this, because column in flex-direction: column is clearly putting it in like a column.
On a grid, when you say auto-fill column it does the opposite. That can be really confusing but whatever. Let's change this to row and you'll see now that it's the same as our description. That's really weird to me but whatever.
Now just so we can have more control. Honestly, I don't see a use for flex-box once you have grid because you have more control over grid. Let's just change it to grid and then let's comment that flex-direction out.
requests-item.scss
&__title {
align-self: end;
grid-column: title-s/title-e;
grid-row: title-s/title-e;
display: grid;
// flex-direction: row;
}
You'll see now that it's a grid, so we can select it, which is nice. I'll show you what I was just talking about, let's copy the grid-auto-flow way down here paste it in here.
requests-item.scss
&__title {
align-self: end;
grid-column: title-s/title-e;
grid-row: title-s/title-e;
display: grid;
// flex-direction: row;
grid-auto-flow: row;
}
You'll see if we set it to row, we had flex-direction: row and it was in a row, but if we set grid-auto-flow: row. It's a column. That's really confusing.
Anyway, let's change it to column and let's go to Firefox and now it's what we want. The only problem is it's way too far to the right.
What we need to do is we need to specify some rows here and we need to tell it that all the items belong on the bottom. Let's do that first. You'll see that it's at the top. Let's just say:
requests-item.scss
&__title {
align-self: end;
grid-column: title-s/title-e;
grid-row: title-s/title-e;
display: grid;
// flex-direction: row;
grid-auto-flow: column;
align-items: end;
}
That will push them down the bottom. The arrow is already at the end, but now it will push the arrow back to the bottom. The reason it did that is because our our title or item title was already aligned to the end, but the items inside of the title's grid, so another grid down after item, you had item, and the title is already aligned there.
The problem is that title has its own grid. We have to specify that it belongs down there too. Now, what we need to do is just say that we don't want this to be any longer than the text. Let's just say grid-template-columns: 1fr 20px;, or however big that arrow is, which is like 3rem. So 1fr 3rem.
That should be good. The only problem with that is it probably won't work. Yeah, that's what I expected. So we're almost set back to the same exact problem we had before. I guess this is a good use of flex-box. Let's say:
requests-item.scss
&__title {
align-self: end;
grid-column: title-s/title-e;
grid-row: title-s/title-e;
display: flex;
flex-direction: row;
align-content: flex-end;
}
If that doesn't work, we'll do something else. Okay, so that didn't work. That's aligning the entire thing. I guess you might be able to apply and align-items as well to the grid. Let's try it out. That looks like it works.
What we need to do now is add in a gap, but you can't really add in a row-gap or a column-gap with flex-box. So we what have to do is just apply a margin on either the title or the arrow. Let's do it to the title. Let's go down here in the text, and let's say:
requests-item.scss
.requests-item {
&__icon {
font-size: 3rem;
}
&__title {
&__text {
font-size: 1.8rem;
font-weight: 500;
line-height: 2.3rem;
margin-right: 2rem
}
&__arrow {
color: $color-gray-4D;
font-size: 2rem;
}
}
Now, that should be good, let's check it out. That looks good.
Let's reference the design one more time to see how much it wants. It's about 27px, but you'll see the arrow spits out a bit right there. It's a little bit longer, so it's probably more something like 25px.
Now it really doesn't matter to be so specific here, but let's just say 2.5rem. That moved it over a tiny bit. That looks good. What we need to do now is basically make this dropdown functional because we don't want it open all the time, and we don't want it open by default.
Let's go ahead and look at our code. Let's see what it looks like without a height on our column. Let's try that. Let's say description height: 0px;. Let's see how that affects it. It didn't do anything, and that's because these still have a height.
requests-item.scss
&__description {
height: 0px;
}
&__description-img {
height: 0px;
}
&__description-text {
height: 0px;
font-size: 1.4rem;
line-height: 1.7rem;
}
}
What we need to do is specify this height on the img and on the text. Let's see what that does.
The text is still there because it has to show it right? So you can't just say 0 on that. So get rid of that and let's do it with the columns. We'll do that in the next video because that's a whole other concept.
Let's commit our code. Let's say git status, git add ., and let's just say git commit -m "cleaned up request item grid".