Right now, we have our nav bar that's using Flexbox, and we have a little component for a font awesome icon, a phone number, and then our hours, and this is another Flex container.

Now, CSS Grid is a tool that has some similarities to Flexbox, but it gives us some different utility, and that's what we are going to utilize here. Specifically, we're going to use it so that we can have the phone number on one line, and then our different hours right below that.

Let's go and let's see what that syntax looks like. In our styles.css you can see we have our icon, we have this left column, and we're going to use the left column, and we're going to learn, also, about how we can give some more specific styles.

You can see our contact hours wrapper is a child of the left column div. Here's what we can do

styles.css

.left-column > .contact-hours-wrapper {

}

What this is telling CSS is "I want you to find the left-column, and then from here, I want you to find the child class of contact-hours-wrapper. We're going to refactor and dive a little bit more into this in one of the next guides.

You're going to see how we can do this for all of our classes. We'll also talk about the importance of it. But for right now, just know that this is very similar to what we did on line 27, where we used the icon class and then we grabbed all of the I-tags inside of it.

Let's add some styles.

styles.css

.left-column > .contact-hours-wrapper {
    display: grid;
    grid-template-columns: 1fr;
}

Now, this might be a little mind-blowing if you've never seen it before, so we'll walk through it. What we're saying here is, Grid, as you may have guessed, it works on a grid-type system.

If you were to look at the website, what that means is you have the ability to set up a grid, however you want, here on the page. You could have 12 columns, you could have one column, and you could have it separated and organized however you want.

Now, I'm using Flexbox for these other elements, and so we're going to simply be using Grid right now for this element, but what I'd like to do is I would like to stack the phone number on top of the hours.

Now we're just going to have two rows, and it's only going to have one column.

Right now, we're saying we want to have 1fr grid-template-columns. What does fr mean? We haven't seen that before. What fr means is it stands for one fractional unit. This is pretty much the same as saying, "I want you to take up all of the space available, and I want you to just go with the default."

Now, we're going to talk about a few options later on how you could change that, and we'll also have some other examples.

But for right now, know that if you use grid-template-columns, and you just say, "1fr," this means that the first child element is going to take up all of the first row, and then any elements underneath that are going to take up all of their rows.

Let's save this and see what this does.

If we hit refresh nothing is changing, so let's debug this. Let's go to our left column here, and then we have our icon. We have our contact hours wrapper, and we have grid-template-columns. Oh, and I know what our issue is.

Earlier, I said how you can never have too many divs? Well, I was right, and you could see what the bug is here.

This works the same way the Flexbox works. Remember how Flexbox works where it does not have deep nesting. It simply looks at all of the elements inside. So, in the case of our contact hours wrapper, even though we have two lines, it still only sees one element.

What we need to do is to create some wrapper divs here.

index.html

<div class="contact-hours-wrapper">
    <div class="phone">
        555 555 5555
    </div>

    <div class="hours">
        10 AM - MIDNIGHT
    </div>
</div>

Now, I did not do that on purpose, but I am kind of glad that it happened, because you're able to see the issue on why it's so important to have these wrapper divs and to wrap your elements up, because it gives you the ability to treat them as separate components on the page.

Now if we hit Refresh, there we go.

Now this is doing exactly what we're wanting.

Now, I promised that we were going to have a visual, so let's take a look at this. If you are using Chrome or Firefox and you click the Inspect tool, and then come over here and click on contact hours wrapper, do you see how those little-dotted lines there that are separating our two rows?

That is a very helpful little tool that the browsers give us. This is invisible to regular users unless they open up the dev tools, but what this does is it is only shown whenever you're using CSS Grid, and it also gives you the ability to visualize where those columns are.

Let's play around with this a little bit.

When you say 2fr then that tells the grid that we don't want one column, we want two columns.

The first column we want to take up just the normal amount of space. The second column we want to take up double whatever this one is, which is the reason why the hours here are much wider than the phone number.

Now, if you reverse this, you can see how this is now taking up double the amount of space.

This is something that's really helpful. We're going to be talking quite a bit more about Grid as we go throughout the course. This is just the introduction.

But you can see how powerful this is. This gives you the ability to create these kinds of grids anywhere in the application that you want.

It's technically possible, to lay out your entire application on a grid, so everything from the nav bar down to all the elements underneath it, all of that would be one master grid. Then you could integrate Flexbox and Grid inside of it. That's definitely a possibility.

Let's go back to where we were before, and there's one more element I want to show you because it's quite helpful, and that is called Grid Gap.

We've implemented Flexbox, and now we've implemented Grid. They're very similar, your first question may be, "Why would I want to use Flexbox versus Grid?"

My answer to that is usually if you know how many elements that you are going to have for just a guaranteed number, then I like to use Grid, where there is a little bit more hard coding into it. So, if you know exactly how many columns you're going to have and that kind of thing, then Grid works really well.

If you want to have more of a variable number of items, kind of like you saw how we were able, earlier on, how we were able to add as many addresses here as we want, and we were able to make the navigation bar very flexible simply by using Flexbox, then that's what I like to use.

But what my top advice really is to work with both of them a lot, and then use them when you feel like it's the most appropriate. There's not really a right or wrong answer, so don't feel afraid thinking that you need to know when it's right to use one versus the other.

I have seen some fantastic applications where the developer might have done the exact opposite. They would have used Flex when I used Grid, and vice versa, and it still works. So, I'd say, use whatever gives you the best results, and whatever you understand the best.

As we go through the rest of this application, we're going to be using both quite a bit. That is what we have there.

Now, the other thing I really like about Grid that isn't really available in Flexbox is, do you notice how these two items are kind of close together? If you look the end goal, they have some space between them.

Well, Grid has this really cool little tool here, and it is called grid-gap. I can say, "grid-gap," right here, and then I can pass it a value, like 10 pixels.

Now do you see how we have this space here?

We didn't have to mess with padding, we didn't have to mess with margin, anything like that because those can throw your items out of alignment. You notice how we had to do that for this icon, and that was perfectly fine because we were just moving this and giving a little space in between.

But here, whenever I'm working with vertical alignment, grid-gap works very nicely, because it just does all that for you. It manages the margin, the padding, and it looks really nice.

Now, if you click on here, now you can see that our columns actually have some space in between them.

They're both exactly the same height and width as they were before, but now what it does is it just automatically puts some space between those, and it's still aligned perfectly.

If you were to try to say, "Add some margin-top here," or "some margin-bottom here," you might run into a situation where they get out of alignment, but grid-gap allows you to have that space automatically.

I'm just going to copy this, and this is a pattern I follow quite a bit, is whenever I don't know the exact styles I want to implement, I will use the developer tools here in Chrome, and build those styles, get them perfect to exactly where I want them.

Then from there, I can just go and I can add them directly into the code. So, I can just paste that in,

styles.css

.left-column > .contact-hours-wrapper {
    display: grid;
    grid-template-columns: 1fr;
    grid-gap: 10px;
}

This is starting to look a lot more like what we have in our design. In the next guide, we'll go and we'll style this up, and we'll also start importing our custom fonts.