0:00 Let's get started. The first thing we have to understand is how to enable Grid, how to turn it on inside of a given container element. I have a very simple container here, a div with the id of container that has 10 different colored boxes inside of it.

0:15 This is what it looks like when I have no Grid involved. I haven't done anything except apply some very basic styles. This is my container, with the black border. Then each of these little rainbow boxes is an individual box div. I've just given them an inline background color to simplify my CSS.

0:34 My CSS is super-simple, with some body styles. The container is centered. It has a width and a height and a border. Then each box just has a font size for the text inside, but no Grid is involved at the moment.

0:47 So far, each of these divs goes all the way across the screen. It's just as tall as its content is. So "FIRST," "SECOND," "THIRD," the piece of text, is what's dictating the height.

0:58 To turn on Grid, all that I do is, on a container element -- mine happens to be called "container" -- any element that I want to use Grid inside of, I set the display property to grid. This is going to control the inside of the container. It turns on the grid system inside of it.

1:16 Now we have something a little bit different. My elements go all the way across the container still, but they're are a lot taller than they were before. What happens is that each one of them grows to take up as much of the available space as possible so there isn't any empty space.

1:31 Just to remind you what it looked like without Grid, we had a ton of empty space in this container. There's a lot that we can control with Grid. So far, we're just turning it on, enabling it inside of a given container, which is what we've just done.

1:44 There's a second option for this display property. There's many options, but there's a second Grid-related option, which is inline-grid. We're not going to notice a difference right away. If I do inline-grid here, it looks exactly the same. The difference is that the overall container now behaves as an inline element.

2:03 If I had, let's just say, a span right here -- I AM INLINE!! -- notice what happens. They share the space. Neither of them is a block element. Our span and this whole container are both inline. That container, on the inside, is a grid.

2:21 If I just go to regular grid instead of inline-grid, now it's a block element. It doesn't share the space like an inline element because it is not an inline element. You have those two choices. Both of them turn on the Grid system in a container. It's just a matter of controlling whether the whole container itself behaves as a block element or an inline element relative to its neighbors.

2:44 We have the Grid turned on. We've got a lot more to cover.