Check out a free preview of the full CSS In-Depth, v2 course:
The "Grid Basics" Lesson is part of the full, CSS In-Depth, v2 course featured in this preview video. Here's what you'd learn in this lesson:

Estelle reviews basic grid terminology: lines, cell, area, track, row, column, and gutter.

Get Unlimited Access Now

Transcript from the "Grid Basics" Lesson

>> Estelle Weyl: So to better understand grids, we have terminology. A grid line is a line basically in the gutter. There's one on the left of the grid, there's one on the right of the grid, and then there's one between each row and each column. There's one on top and there's one on the bottom.

[00:00:18] So if you have a three-by-three grid, you actually have four lines going vertically and four lines going horizontally. A grid cell is any cell, such as the number 10.
>> Estelle Weyl: A grid area, is a space basically, I have no clue what a grid area is. It's basically when you say this area here because you can give certain things names, and we're gonna cover that later on.

[00:00:47] A grid track is either a grid row or a grid column. It's any area between two grid lines, vertically or horizontally. So grid row is one that's horizontal. And a grid column is one that's vertical. And then the gutter is the grid gap that's in between here, that white space.

[00:01:08] I'm gonna just open this up in the debugger right here. So this is the grid gap here. This is a grid cell. 7 through 12 is a grid row. 2 through 20, or there might be some below, is a grid column. And then the grid line is this line on the left, the line in between here, the line between here, the line between 3 and 4, the line between 4 and 5, the line between 5 and 6, and the line right after number 6.

[00:01:36] So that's a grid line.
>> Estelle Weyl: Okay, so let's see, is it ready? Let's check can I use and have it not work for us. So can I use,
>> Estelle Weyl: And if we go to grid, look at all that beautiful green.
>> Estelle Weyl: It dropped into production, I think, on October 17th in MS Edge, and since then it's basically every single evergreen browser has it.

[00:02:08] Older versions of IE, so if I show all of them, have an older syntax of grid. So you can actually use grid with all of the Edge and starting with IE10, but it has a slightly different syntax. I'm not gonna cover that syntax today.
>> Estelle Weyl: So the properties we've seen so far are the display element with grid, or we can have in-line grid.

[00:02:40] We've shown grid-template-columns, which you might not have noticed, but that was basically determining the size of the different columns. We created a grid-gap, there was room between the gaps. On the child, we placed that pink element using grid-columns and grid-row. And we also had two new values that you may have never seen before.

[00:03:00] For the grid-template-columns, we had use a unit called fr, and we had repeated some stuff. So we are gonna cover all of that right now. So first, let's start by setting up the grid.
>> Estelle Weyl: To set up the grid, we have properties that are on the parent. We have the display property.

[00:03:24] We have the display template-columns, which says basically the width of all the columns, grid-template-rows which is the height of all the rows. We have a shorthand for it, which is grid-template. And then we can have a grid-column-gap, a grid-row-gap. Which there's a shorthand and you can just say grid-gap and that does the vertical and horizontal spacing.

[00:03:49] In Grid, all of your vertical gaps are gonna be the same size and all of your horizontal gaps are gonna be the same length, as well. But those could be two different lengths. But you can't have and you probably don't want different sized gaps between things.
>> Estelle Weyl: So we're gonna cover those first, and then we're gonna cover grid items, and then we're gonna cover the other properties of how to align whole rows.