- Read Tutorial
- Watch Guide Video
Let's open up requests-items.scss and let's start with our icon.
requests-items.scss
&__icon {
grid-column: icon-s/icon-e;
grid-row: s/e;
}
Now we need to modify our grid-rows to have a start and end.
requests-items.scss
.requests-item {
grid-template-rows: [s title-s] 34px [title-e tenant-s] 34px [tenant-e e description-s] 147px [description-e];
grid-template-columns: [icon-s] 68px [icon-e title-s] 1fr [title-e arrow-s] 68px [arrow-e date-s] 100px [date-e];
}
Now we'll copy it from our icon and fill those in.
&__title {
grid-column: title-s/title-e;
grid-row: title-s/title-e;
}
&__tenant-unit {
grid-column: title-s/title-e;
grid-row: tenant-s/tenant-e;
}
&__arrow {
grid-column: arrow-s/arrow-e;
grid-row: title-s/title-e;
}
&__date {
grid-column: date-s/date-e;
grid-row: s/e;
}
&__move {
grid-column: date-s/date-e;
grid-row: s/e;
display: none;
}
let's go into Chrome and check it out.
So not much changed. Let's test it with a color on our icon.
requests-items.scss
&__icon {
grid-column: icon-s/icon-e;
grid-row: s/e;
background-color: cornflowerblue;
}
So our grid is working. The description is making the items really tall though so let's just specify that the description belongs where it does. Let's look at our request item and basically we need to assign this one item the description item and then we need to make a grid within the description for these two items. We have description and then description image in text.
So let's go back to request-item.scss and let's add in our description.
requests-items.scss
&__description {
grid-column: s/e;
grid-row: description-s/description-e;
}
&__description-img {
}
&__description-text {
}
Let's just see what this looks like real quick.
All right, it looks a little weird still. So basically what we need to do is specify where these go on their own grid. Let's open this up in Firefox. So what's happening here is it looks like maybe we're not specifying where everything else belongs as precisely as we thought, because it should extend it all the way from start to finish, but it's not.
So let's check this out. So basically what we want to do is take our items and not have them go past the description. We don't want it to end at the bottom of the description. We want it to end at the top of the description.
requests-items.scss
.requests-item {
display: grid;
grid-template-rows: [s title-s] 34px [title-e tenant-s] 34px [tenant-e e description-s] 147px [description-e];
grid-template-columns: [icon-s] 68px [icon-e title-s] 1fr [title-e arrow-s] 68px [arrow-e date-s] 100px [date-e];
Now that should fix it. You'll see that the icon doesn't extend all the way down now. And the reason that's good is because we can probably extend our description now all the way to the start here. So try that out description column start to end. OK. Yes. So the reason it's not working start to end on description is because we don't have we haven't specified a start. Let's add that in.
requests-items.scss
.requests-item {
display: grid;
grid-template-rows: [s title-s] 34px [title-e tenant-s] 34px [tenant-e e description-s] 147px [description-e];
grid-template-columns: [s icon-s] 68px [icon-e title-s] 1fr [title-e arrow-s] 68px [arrow-e date-s] 100px [date-e e];
Okay, that should work.
As you can see it's working now. Now we just need to specify the grid within the description, because we obviously want the image and the text to be on a row axis with a little gap of like 40 pixels, and then we want the text to only be about 500 pixels wide. So really what we should be doing is not putting this entire description from start, and we should do it from title start to date end.
Let's do that before we build the mini grid in there.
requests-items.scss
.requests-item {
display: grid;
grid-template-rows: [s title-s] 34px [title-e tenant-s] 34px [tenant-e e description-s] 147px [description-e];
grid-template-columns: [icon-s] 68px [icon-e s title-s] 1fr [title-e arrow-s] 68px [arrow-e date-s] 100px [date-e e];
There's a problem with our text field extending past our date and the reason is because the date probably has a text align of left. So in date let's align to the right and let's put in a 60 pixel grid gap after the end here.
requests-items.scss
.requests-item {
display: grid;
grid-template-rows: [s title-s] 34px [title-e tenant-s] 34px [tenant-e e description-s] 147px [description-e];
grid-template-columns: [icon-s] 68px [icon-e s title-s] 1fr [title-e arrow-s] 68px [arrow-e date-s] 100px [date-e e] 60px;
&__date {
grid-column: date-s/date-e;
grid-row: s/e;
text-align: right;
}
So let's look in here and see how it looks.
That gives us a really good start. Now what I want to do is just kind of center all of these items and increase the font size on some of these. Now that's more specific to the items but it doesn't matter. OK so what we want to do is center these titles and icons. OK so let's look at our design and see what it wants.
All right so it looks like we want just a few items to be set to left, but on this icon we want it to be centered. So here's what we'll do. Let's go to the top here and let's just say everything to justify center and align item and center and see what happens. And then we'll overwrite whatever we need to.
.requests-item {
display: grid;
grid-template-rows: [s title-s] 34px [title-e tenant-s] 34px [tenant-e e description-s] 147px [description-e];
grid-template-columns: [icon-s] 68px [icon-e s title-s] 1fr [title-e arrow-s] 68px [arrow-e date-s] 100px [date-e e] 60px;
justify-items: center;
align-items: center;
Let's look at our application you'll see everything's now in center.
That's good for the icon but not day because we want the date to line up to the right. So what I want to do is really not even set justify-items center We just want to specify it only on the icon. OK so let's go into here and let's take it off let's set it on our icon.
requests-items.scss
&__icon {
grid-column: icon-s/icon-e;
grid-row: s/e;
justify-self: center;
}
Let's see what we need to do now. Looks like the arrow is too far up top here. If we reference our design, it shows us that the arrow is supposed to be in line with the title and not the date or icon. Basically we need to fine tune our grid, and add in our additional styles to get this to match the design better.
OK so here's what I want to do we have to either combine our title and arrow in their own grid, like what we've done with the description and image, or we can get this to somehow be only the width of the text. And I think we can do that by declaring it as a minmax.
.requests-item {
display: grid;
grid-template-rows: [s title-s] 34px [title-e tenant-s] 34px [tenant-e e description-s] 147px [description-e];
grid-template-columns: [icon-s] 68px [icon-e s title-s] minmax(40px, 1fr) [title-e arrow-s] 68px [arrow-e date-s] 100px [date-e e] 60px;
align-items: center;
Now, we'll handle that in the next video after we get all of the styles in for our specific items. So the colors and all that junk. Now before we end this video let's just throw in the tiny grid for this image and description so it looks like our design.
requests-items.scss
&__description {
grid-column: s/e;
grid-row: description-s/description-e;
display: grid;
grid-column-gap: 4rem;
grid-auto-flow: column;
}
Now it looks really really similar to our design. We just have specific styles to put it now. Okay. So in the next guide we'll start throwing in the specific styles, like the color and the font sizes, and then after that we'll fine tune our grid and then get in all the details and then make it functional.
So let's go ahead and commit our code.
git status git add . git commit -m "layed out JSX on requestsitem grid"
I'll see you in the next video.