So the first place we want to apply these styles is in our home.js. So what I want to do is actually get rid of this first div and then let's just tab this back and get rid of this space. Okay, now what I want to do is give this div a class name of home.

home.js

<div className="home">
    <Searchbar onSubmit={(query) => this.handleSearchBarSubmit(query)}/>
    <RecentPosts/>
</div>

Let's close out our post.js and let's head to our, okay it appears that we have an error, interesting. Well I'm going to ignore that and let's head over to our main.scss. Now in here we would say .home and I want to specify some body style so let's say font family is lato.

main.scss

.post-topic {
    margin: 0 4px;
}

body {
    font-family: 'Lato';
}

.home {

}

Now you probably don't have this in our index.html so check your index.html it looks like we have Monserrat. So let's go get lato, so let's google, google fonts and let's click this first link.

Now let's search Leto, and then let's add it, and let's click here and open it up, and let's see what else we need to do. Let's add a couple more just in case, I'm not sure we need these at the moment, but let's see if there's a condensed version, okay, well we'll just come back and add them as needed.

Let's add the bold 700 and a black 900 actually, okay, so we should be good. Let's throw this link in here now

and then we can reference it like that, which we already know what to do. Let's go back to our code, and let's throw it in place of this Monserrat one, let's save it. Well let's leave that Monserrat in there, let's just put it below it just in case we need it.

Now, let's go to our main.scss, we have that, and let's make the default one sans serif and let's just apply this to the html document as well, I don't think we need to but let's just do it. We'll get rid of it if we realize we don't need it.

main.scss

.post-topic {
    margin: 0 4px;
}

html {
    font-family: 'Lato', sans-serif;
}

body {
    font-family: 'Lato', sans-serif;
}

.home {

}

Okay, so we're set up for fonts. Now let's see if this is working, I'm going to close out Google fonts this stack overflow. Actually I'm going to mark it because we realized it worked in the last guide and then I'm going to close out animate height, I'm going to close out the API sense we don't need that anymore. I'm going to go back to our app and it looks like I believe we have our font.

I'm going to inspect this first one font family I'm gonna unselect that and you realize it goes away I'm going to get rid of this as well actually, this html in the scss and it should still be there, let's give it a shot. Okay, yeah it's still there, and it's looking nice.

Now let's talk about css grid, so we talked about it with the codepen earlier. So let's go to the codepen and I'm going to get rid of this JS that I was writing and here's the html and css, okay I'm going to close the console and we have our data here.

So I initially was going to show you how to do all of the styles first and then the functionality but I wanted to get the functionality out of the way and then focus on styles. So let's talk about grid a bit, we have our code here in codepen and this is basically set up how we have our home.js setup.

We have our logo, search bar, and recent posts, and within these components we have logo main, within search bar we have the form search bar, and within recent posts we have recent posts. So what I'll do is I'll just rename these accordingly so recent posts, search bar and you can just follow along here if you want to type this all out you can.

The class for the first one was logo main I believe, okay so the only difference here now is we don't have the actual logo but the grid styles are all going to be the same. So first thing we can do is type out the container, I'll just not uncomment it all, I'll just write it out.

We want a display of grid. Okay, save that and nothing happens, let's give it a background color of skyblue so I can explain how it's working.

So it puts it there now without grid if we put in the height of 400 pixels we get the height or let's do like 300 pixels, we get the high but everything still in the top left. Now with the grid, do you see that? It changed it.

Okay now this is all great, but you'll notice in our app we need the top to be a little bit from the top and maybe a little bit from the bottom. So a cool attribute we can use for this is justify items or align content. So align content, usually when it says align it means it's dealing with the row.

And then the justify is with columns so we can actually search css grid in google and this one first one css tricks should be a very good guide, this is how I actually learned css grid, I use this guide. I've learned it completely from this guide.

Now let's search align items, I think that's what we used here, align content is what we used. Let's try align content okay so it says aligns it along the block or the column axis. Okay so justify content is the row and align is against the column.

Now it's look here and you can see that end will put it at the end, start will put it at the start, and center puts it all in the middle, but stretch will stretch it all out and space around will do exactly what we just wanted. Okay so basically it's got space around all of it. Now, space between will not give us space on top or the bottom, and space evenly will give us equal space all around.

So you can use space between if you want, that's probably a better option. Let's look at our design, it looks like there's more space in between than on the bottom, and we're going to modify that anyway with grid gap but basically, okay spaced evenly, that's what I meant instead of space around, that will give us even space.

But as I just noted this is more there's more space to be doing here than the tops, so let's put space around. Okay, now, if I were to get rid of the height you'll see it all crunches back up.

So it's important that we declare a height. In the app case we're probably going to do 100 view heights so it's going to be the height of the entire document. Now what we can do to center these items is simply type justify-items center, now it centers them.

If you look in here let's look at what justified items says, it says aligns grid items along the in line row axis as opposed to align items which aligns them along the block axis. Okay so if we were to type in align let's see what that does, and nothing, and that's probably because these don't have any specified height. Let's say search bar again and see, well interesting, I'm going to get rid of that search bar selector and let's look back here.

So justify items aligns them along the inline row axis so it's basically going to center or items here. And since we only have one column basically all you need to worry about is the first column, don't worry about these other two columns.

All we know is that we have one column which is the entire page and it is centering it, so that's why we're using center. If we were to use stretch it would stretch along the entirety, now stretch should, I would imagine it would stretch this bar from one side to the other and it probably wouldn't do anything to these top 2 because they're kind of fixed.

Okay so now what I'm thinking is this is probably the width except for the input so you'll see that's probably why it's not working. If I do .search-bar and make the background color cadetblue, you'll see it is indeed the width.

Now if I put back on justify items space evenly or not evenly but center and you'll see that you can't even see the background color because it's not a stretched or anything it's the same width as the input, it's just accommodating the input.

So that's how that works, we want to keep this at center. Let's get rid of the search bar styles and I'm going to get rid of this comment here because I wrote this out before so I could explain it better. Now what we need to do is talk about the logo.

We need to get that centered but we don't really need to do this because we already have our logo styles. If I do this, that's just going to make it red and move a bit, and i'd actually have to change this to main.

But yeah that's how that works. Now let's see what else we want to do, so I'm going to uncomment these search styles and try to explain them. Oh. Well, let's say .search-bar, that's what I was looking for. Now what's happening here is if I get rid of this all we have is an input with a width of 250 and a height of 40.

Then our entire box or our search bar, like I did with the cadet blue color above is we're saying okay the width is 100%, height is 100 pixels. Now this is a problem because we want it to be one in the middle of the row and then in the middle of the column, so we can say display grid nothing will happen but then align content will put it in the middle.

Going back to this css tricks guide, we used align content. Basically it's the same thing, we're just centering it. Now we need to do the same thing with justify items, we need to center it. It's almost like it's a, well it is, a grid within a grid, we have our container which is a grid and then we have our search bar which is also a grid of its own, so that's exactly how that's working.

Now for our recent, we our unordered list so it might work a little differently. I'm going to uncomment this and say recent posts save that and basically what's happening is we have our grid okay, let's uncomment this and then we will explain it.

So basically we're saying width 600 pixels height 120. Now it's all the way to the left here because the width is 600 pixels, when I add in the background color you can see that.

Now we need to apply grid, nothing's gonna happen initially. But now we just need to do the same thing we're doing with the search bar here. So I'm just going to copy this and I think I put the same, it looks like I put different styles but yeah, so it just needs align content and justify items. I'm going to uncomment these ones that I had and I guess it does the same thing but we can just do align content and justify items.

Okay so that's how that works, and that's an overview of flex box and how it kind of works and the approach we're going to take, so we're gonna style our app a lot like this. Now what I recommend you do is go through this css tricks guide and the only way you can really learn stuff like this is instead of just going through guides like this and replicating exactly what I or the person you're watching is doing every single time.

What you should do instead is 1) follow the guide so you can get an idea of how this all works and then 2) try and build an app and just mess around with all of these properties, mess around with all of these, even if you know it's not going to get the effect you want.

Exactly like how we tested out here earlier stretch. We didn't have whatever it was we didn't have a a with on our search bar. So we tried out stretch and then we saw it affected it a certain way. Now if you put stretch on here it's going to stretch these items all the way across okay. And that's how it works, even though thats not what we were looking for.

It's just really good to go through these things and just test out everything to get certain effects that you might not even want because it will teach you how it works, so I recommend doing that. Let's stop the guide here since it's going on way too long, and let's actually get into the styles of our app in the next guide.

We modified a little bit of our styles in this guide so let's just say

Terminal

git status
git add .
git commit -m "began styling the home component and talked about CSS Grid in codepen"
git push origin master

Okay I'll see you in the next guide where we will hop back into the styles and get going.

Resources

Source code