So let's start by going to our requestsItem.js let's see what we need to put into our CSS file. We have the icon, the title, tenant-unit, arrow, date, and move. Let's go into requests-item.scss and these in.

requests-item.scss

.requests-item {  
    &__icon {

    }
    &__title {

    }
    &__tenant-unit {

    }
    &__arrow {

    }
    &__date {

    }
    &__move {

    }
}

So now we have all those in there, now we just need to style them, which should be pretty quick. Well, we need to place from the grid then style them. Also, we need to remember that we have to add a description and an image, which we'll place on a third row. We'll throw in a div for them below our button.

requestsItem.js

<div className='requests-item__description'>
    <img 
        className='requests-item__description-img'
        src='http://via.placeholder.com/160x94'                        
    />
    <p className='requests-item__description-text'>
        Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum
        Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum
        Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum
        Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum
    </p>
</div>

There you go, that completes our JSX. Now we can finally work on the grid.

requests-item.scss

.requests-item {
    display: grid;
    grid-template-rows: [title-s] 34px [title-e tenant-s] 34px [tenant-e description-s] 147px [description-e];
}

Now we get the heights for these rows from our design, and we can see from the design that our closed item height is 68 pixels, and the open item height is 215 pixels. From there we can figure out the heights for each row.

Now if we look at our application we'll see that they all look very large, that's because they're all open technically.

So let's go in and add in some columns. We only want to have a few.

requests-item.scss

.requests-item {
    display: grid;
    grid-template-rows: [title-s] 34px [title-e tenant-s] 34px [tenant-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];
}

So that should be good. If we look at our application, we can see that our items are all over the place.

All we have to do is say where they belong on the grid, and that will fix it. But let's do that in the next video.

Let's commit our code.

git status
git add .
git commit -m "built grid for requests item"

Resources

Code at this stage