First thing I want to do is fix this error, so let's go to our application. Let's close the terminal and let's go to our content.js. What I'd like to do is delete this for, and we'll leave this in here.

What we need to do is close out all of our files, and reload the page in the browser, and we'll see that we have our application. What we need to do is start on the style. We have a little bit of our card in here, but we need to add other things. I'm trying to think. Where should we begin?

What I'd like to do is generate a grid for our inputs, so you can read about CSS grid by googling CSS grid, and selecting CSS-Tricks. This link here.

In here this will provide you a good understanding of what CSS grid is, but it will take you a bit to understand fully how this all works and you might have to go through a few of my applications before you fully understand how this works.

Don't expect to have 100% understanding of CSS grid by the end of this app, because you definitely won't. You might have a very good understanding of it, and you might know how to somewhat use it and create your own grids, but this is just the first app. So you don't need to worry about not fully understanding it. Just try and kind of understand it.

Let's go ahead and go back to our application in the code. I'm going to put this up here, and let's go to our card.js, and look at the tags. We have: "card", "card__inputs", and then in input.js we have "input". Okay so let's get our style and open main.scss. In our .card we can just simply say:

main.scss

.card {
    height: 736px;
    width: 1240px;
    box-shadow: 0 4px 30px 0 rgba(0,0,0,.06);
    border-radius: 7px;

    &__inputs {
        background-color: skyblue;
    }
}

I'm just saying underscore underscore inputs, and that's exactly why I named it card__inputs. If it has this, we could just put whatever is after this. Now we could even put a dash or something, but we just have to say in here we just talked about the dash. You don't even have the dash, you can just do that, but I want to do the underscores because I feel like that's a good separation and that makes things readable.

Lets go to our app and see what that looks like. You'll see that over inputs have a background color blue. Now if these a little bit of space between them you'd notice that there's the white background.

Let's start our grid. Let's go into card, and say:

main.scss

.card {
    height: 736px;
    width: 1240px;
    box-shadow: 0 4px 30px 0 rgba(0,0,0,.06);
    border-radius: 7px;

    display: grid;

    &__inputs {
        background-color: skyblue;
    }
}

Now if you save that, and you go here. No much is going to happen, but you'll see it kind of messes up our button and our story, and everything's a little weird. So to fix this first thing I want to do is let's just go to a local host. What did we call this. 2030? Okay, so what I want to do is open this up in Firefox.

Weird huh, I'm using Firefox. Basically, what we are doing in here is: we are doing this grid. If you hit inspect element, and you open this up you'll see that we have access to this overlay grid option right here in layout. If you select that, we can see our grid.

Now let's see. You'll see that there's two things. There's the inputs and the button. So if you open up our div, not inputs, but our card div, you'll see we have div and button. That's exactly what's happening. It is just rendering both of these. If you open up inputs, we have all these inputs. We'll be adding in a grid in here in a second.

What I want to do first is: actually add in that grid. Let's go to input, and let's say:

main.scss

.card {
    height: 736px;
    width: 1240px;
    box-shadow: 0 4px 30px 0 rgba(0,0,0,.06);
    border-radius: 7px;

    display: grid;

    &__inputs {
        background-color: skyblue;
        display: grid;

    }
}

Now you'll see that we have a grid on our inputs. I told you that we would have a background color of white in between these inputs and that does not change. The reason it's still blue however is because these inputs are each just that high, the input div.

In our card.js, if I command + click on input so we enter into the input.js. Our input is this entire thing not just the input. Basically, if I were to go back to main.scss, and in the inputs I just say:

main.scss

.card {
    height: 736px;
    width: 1240px;
    box-shadow: 0 4px 30px 0 rgba(0,0,0,.06);
    border-radius: 7px;

    display: grid;

    &__inputs {

        display: grid;
        input {
            background-color: skyblue;
        }

    }
}

We're going to get that effect with only the inputs can having that. I want to change it back to just the background color of the inputs.

Also, the reason that's happening is because we're referencing the entire inputs not each individual input. Let's just write those in real quick. Let's say:

main.scss

.card {
    height: 736px;
    width: 1240px;
    box-shadow: 0 4px 30px 0 rgba(0,0,0,.06);
    border-radius: 7px;

    display: grid;

    &__inputs {
        background-color: skyblue;
        display: grid;

    }
}

.input {
    &__title {

    }
    input {

    }
    &__number {

    }
}

Now the order this doesn't matter, but obviously, you want to follow what kind of similar patterns so you can see what's going on, so you can understand better. Let's see what we have to do. We have our design here. We need to create our grid here for the inputs.

In Firefox, if select card inputs, since we put the display grid on it, you'll see that we have this grid now, but we don't want them on the same line we kind of want like four here. So what we can do is specify a specific amount of rows and columns.

Let's go ahead, and go into our code. We can do this by saying:

main.scss

.card {
    height: 736px;
    width: 1240px;
    box-shadow: 0 4px 30px 0 rgba(0,0,0,.06);
    border-radius: 7px;

    display: grid;

    &__inputs {
        background-color: skyblue;
        display: grid;
        grid-template-rows: 1fr 1fr 1fr 1fr;
    }
}

What an fr is, is a fractional unit. There's just going to be about this amount of space. This adds up to 4. All those ones adds up to 4. So one out of four is going to be .25. That's going to take out 25% of the area. If we had this to say 5, and when we say five out of five six seven eight. Five out of eight that's going to be worth 62% of the screen.

Basically, our first row of inputs is going to be pretty big. If you go to our app you can see first one is extremely big, and then the next three are the same. Obviously, we didn't make enough rows to account for all of our items, so it doesn't do anything. It just automatically generates a height for these.

What we want to do is: we have 4 rows, right? Let's just say:

main.scss

.card {
    height: 736px;
    width: 1240px;
    box-shadow: 0 4px 30px 0 rgba(0,0,0,.06);
    border-radius: 7px;

    display: grid;

    &__inputs {
        background-color: skyblue;
        display: grid;
        grid-template-rows: repeat(4, 1fr);
    }
}

It's the same thing as saying `1fr 1fr 1fr 1fr. So now we have these 4 rows. Now what we need to do is specify columns, so that we have four columns. So same thing, we just have to say:

main.scss

.card {
    height: 736px;
    width: 1240px;
    box-shadow: 0 4px 30px 0 rgba(0,0,0,.06);
    border-radius: 7px;

    display: grid;

    &__inputs {
        background-color: skyblue;
        display: grid;
        grid-template-rows: repeat(4, 1fr);
        grid-template-columns: repeat(4, 1fr);
    }
}

Now I recommend you go and look at that CSS Tricks link that I was talking about, because these are all explained. You'll see that we now have a grid with four by four.

You'll see in here, if you hit command + f and type in grid-template-columns you'll see that it has a good explanation of how this works. Let's go ahead and go back to our code, and let's see what we have in here.

We have this laid out on a grid and this button is huge. So we can quickly fix this by saying in here:

main.scss

.card {
    height: 736px;
    width: 1240px;
    box-shadow: 0 4px 30px 0 rgba(0,0,0,.06);
    border-radius: 7px;

    display: grid;
    grid-template-rows: 1fr 50px;

    &__inputs {
        background-color: skyblue;
        display: grid;
        grid-template-rows: repeat(4, 1fr);
        grid-template-columns: repeat(4, 1fr);
    }
}

That's an introduction to CSS grid, and how we can apply that to our inputs. In the next guide, we will move on and style more of our application, and set up the rest of our grids.

So let's commit our code. Let's hit command + j, and let's say git status, git add ., and what I'd like to say is git commit -m "created a css grid for card and inputs". Then git push origin master, and I'll see you in the next guide where we will continue building our grids.

Resources

• Source Code
• CSS-Tricks