What we want to do is head over to our home.js. We have this className of home. Now, let's go ahead and go to our main.scss. Let's close our index.js and our recentPosts.js. What we want to do in here is apply some styles. Let's say:

main.scss

.home {
    height: 100vh;
    width: 66vw
}

The way that I got this 66 is I went to the design here, and the width of the search bar is the width of whatever we are going to have in here. So 942. Then I got to the width of the document which is 1440 up here.

Then I just went 942/1440 is about 6.6. I just rounded it up, and it is about 66% so I put 66vw. With that effect. You get this. It looks really clean. So that's what we are doing there.

This is the completed app, so don't worry about all these styles. This is what we are currently looking at. Now, let's save that and see what we get. I don't think anything should change. Yeah, nothing changed.

What we want to do now is apply the grids. So let'ssay:

main.scss

.home {
    height: 100vh;
    width: 66vw;

    display: grid;
    align-content: space-between;
}

Okay, let's see what we get. That's what we're looking for.

Let's go back to the Pen and see what we have. We want space-evenly, so let's change this to space-evenly. Let's go back to our app, and that's what we don't want.

We actually want space-around so we can have a little bit more space between these. Looking at the completed that's looking pretty nice. So let's go ahead and continue styling here. What we want is for these to display in the middle, right? So let's see how we did this in our Code Pen.

I believe we used justify-item: center. I'm going to comment that out. I think that's how we can get it working here. Let's try it out. If this doesn't work, there's another way we can do this.

main.scss

.home {
    height: 100vh;
    width: 66vw;

    display: grid;
    align-content: space-around;
    justify-items: center;
}

That appears to work, but what you'll notice is that it's not directly in the middle. OK. Now the reason being is because our home is a width of 66, but our entire document is still 100.

So if I go background-color: cadetblue and save that. You'll see that it ends like right here.

We can fix this by getting rid of the background-color, and then to referencing a tag called .app-wrapper. If you go to index.html that is this tag, and in our bootstrap.js that's what we're doing. We're putting our components into the app-wrapper in index.html.

Basically, this is our entire wrapper and we can fix it by saying: display: grid and justify-content: center. Save that, and that should be in the center. Sweet, that's looking great.

I think we're good there. What we want to do now is make this a mix-in because we may need to use this in our results page. What I want to try is template-rows. If you look in here and you search template-rows.

It says it "Defines the columns and rows of the grid with a space-separated list of values. The values represent the track size, and the space between them represents the grid line." So this is a little more in-depth than what we want, but we can do something like this.

The fr unit "allows you to set the size of a track as the as a fraction of the free space of the grid container. For example, this will set each item to one-third the width of the grid container." So as you can imagine if we do 2 right here it's going to be two-Fourths.

So about one-half of the page is going to be that, and this is going to be about one-fourth of the page. Let's just type in here:

main.scss

.home {
    height: 100vh;
    width: 66vw;

    display: grid;
    align-content: space-around;
    justify-items: center;
    grid-template-rows: 1fr 2fr 1fr;
}

Now let's save this and go to our app. You'll notice that we have a lot more space right now, but the top is kind of messed up.

I'm going to get rid of justify-items: center, and that's going to put it over here. So we want that. Let's get rid of the template-rows and deal with that later. I think I want to switch to template-rows later on.

Let's go ahead and hop into the next guide where we will style the logo or see if we need to add any styles the logo. If we don't, we will hop right into the search bar styles and get this in. So I'll see the next guide where we will do that.

Let's commit our code, so git status, git add ., and let's say git commit -m "styled the home with CSS grd". I'm going to push this, so git push origin master.

I'll see you in the next guide where we will hop into the searchbar or the logo. I think we already did all of the logo styles. I mean we did with the custom size, so I think we're good there, but search bar is next.

Resources

• Source Code
• CSS-Tricks