You'll see that this kind of free will, and going wherever it wants. We want to secure it to a grid and make it so we can apply other things for good. Now all I've done here is open up Firefox and I went to the Inspect Element and selected header-wrapper, so that's why you're seeing this.

So let's go ahead and start developing our grid by going to our code and looking at index.html. You'll see that we have this default div called app-wrapper. That's the div we want to apply the grid on. I'm going to close that, and I'm going to head over to base.scss, and right under body I'm going to put:

base.scss

.app-wrapper {
    display: grid;
}

Now that's not really going to do much because we haven't defined any columns or anything, but it'll show the grid now in our tools. You'll see that we have this one item here. Let's kind of go out and display the rest of the columns.

Alright, let's go to our file. Let's go to go to variables real quick just to see if we have D8 that is the color we are going to be using for the bar. Now let's just say in app-wrapper:

base.scss

.app-wrapper {
    width: 100vw;
    height: 100vh;

    display: grid;
    grid-template-rows: [page-s header-s] 13.6rem [header-e bar-s] 4rem [bar-e content-s] 1fr [content-e page-e];
}

That should give us a lot of stuff to work with. Let's go to our application here, and you'll see that it's coming along nicely. We got the header here and we got the bar; although, you'll see that this is all the way to the left. And we kind of want to indent it a bit to the right.

Now we could just do what we did with the top and give it a margin or padding or whatever, either one or we could apply it to our grid.

Now the reason we want to apply it to our grid is because other components throughout the application are going to have the exact same padding or the exact same inset. So we might as well just make a grid, some rows, or apply it to the columns.

So let's go to our application code on a new line let's say:

base.scss

.app-wrapper {
    width: 100vw;
    height: 100vh;

    display: grid;
    grid-template-rows: [page-s header-s] 13.6rem [header-e bar-s] 4rem [bar-e content-s] 1fr [content-e page-e];
    grid-template-columns: [page-s] 14rem [content-s] 1fr [content-e] 14rem [page-e];
}

Then on our rows, we also have content start to content end, which is right here, and starts below our bar. So you can kind of see now that all our pages are going to exist in this area. This big box.

Let's go ahead and fix our header by applying it where we want on the grid, which is obviously right here. We've labeled them already so it's going to be pretty easy. So let's go into headerWrapper.scss, and in our grid kind of set up at the top.

Let's go ahead and hit return a couple times, and we'll just put it where it belongs on the grid at the top. So that's going to kind of follow our style of how we're doing this throughout the application.

We're going to have a set for our grid, and a set for our styles like I've said. Where it belongs on its parent grid is going to be at the top, and then its own grid it's going to be all this.

So the head wrapper has its own grid which is this grid right. So just to be clear on what that is. It's this right here and then where it belongs on the grid the whole grid or this grid belongs on its parent grid and is going to be declared here. So let's say:

header-wrapper.scss

.header-wrapper {
    grid-row: header-s/header-e;
    grid-column: content-s/content-e;

    display: grid:
}

Now let's go ahead and create that bar by going into our headerWrapper and putting it in here. Now there's one problem with putting it in here and it's that we're going to be using this header wrapper on other components. We're going to be using it on components like this one right. We want the header, but it has a different top here has a bar doesn't have the gray bar that you see right here.

So we'll just put it in here for now, the headerWrapper, and we will re-factor it later on to be a little bit more customizable. So let's just say: <div className='header-wrapper__bar'></div>, and since we're going to be customizing it: we're going to rename the class name later anyway, but we'll get to that when we do.

Let's go into header-wrapper.scss and let's say let's see this. Alright, so the only problem with this is that it includes its inner hearder-wrapper, which we actually don't want because it's not going to be part of this grid.

So we don't even need it refactored later on, let's just do it now. Let's get rid of this div in here and let's create in our components directory: let's say new file from let's say headerBar.js.

In here we want to say:

headerBar.js

import React from 'react';

export default function HeaderBar() {
    return (
        <div className='bar'></div>
    )
}

That should be good. Let's go ahead and get this bar some styles. Let's go into our base and let's just declare it in here:

base.scss

.bar {
    height: 4rem;
    background-color: $color-gray-D8;
    grid-row: bar-s/bar-e;
    grid-column: content-s/content-e;
}

So that's going to be to far in. Why is it not rendering. Let's see why it's not rendering. Alright, it's not rendering because we are not using HeaderBar anywhere. So let's go ahead and go into our headerWrapper.js and see if we want to use it in here. Let's just say.

We're going to change that later on now, but we're just trying to get our grid put together first. So you'll see that it starts where we don't want it to start. We want to extend across the entire content of the entire page.
Luckily we set that up in our grid already. In our base.scss we have page direct to page end. So let's say page start page and save that on the bar.

base.scss

.bar {
    height: 4rem;
    background-color: $color-gray-D8;
    grid-row: bar-s/bar-e;
    grid-column: page-s/page-e;
}

Let's go back in our code and you'll see our application, and you'll see it extends across the entire content. So, you can see that setting up a really nice grid like this can be really helpful. OK. Now one quick change I want to make is our component is rendering right here. We don't want it to render it here to render the content right.

So first step into doing that is going to our headWrapper.js, and or {this.props.children} and moving it, and putting a comma here:

Now let's hit git status, git add ., git commit -m "built base grid". Ok, see you in the next video.

Resources

• Source Code