A Quick Introduction to CSS Grid Layout

1.3 A Quick Look at the Terminology

Let's take a closer look at the terminology for grid. And none of this is out of the ordinary because the concepts are really very simple. But we still need to go through it in order to understand how this works. And I'm sure some of these notions will sound familiar, because well, they're used to describe a grid system, and we've dealt with grid systems before, right? So, here we go. Let's start with the grid container. This is the element that will hold your grid together. It's the parent element of the grid items. And it can be whatever element you want, really. The body, a div, a main, a footer, a header, it doesn't really matter. Then we have grid items, these are any direct descendants of the grid containers. So, careful here, direct descendants, so not grandchildren, not great grandchildren, direct descendants. And this can be any element you place in your grid container. So it can be a paragraph, a div, an anchor tag, whatever it is, that's considered to be a grid item. As long as of course it's a direct descendant. So it's not like three levels deep in the dom tree, it's just the first level in the parent. Then we have the grid lines. And the grid lines will basically divide the grid to create the correct structure. And lines can be vertical and horizontal. Now, on a typical grid the lines start from number one on the left side for vertical and, of course, number one on the very top for rows, or for horizontal lines. And they go one, two, three, four, one, two, three, four, depending on how you define your grid, how many columns you want in you grid, how many rows you want in your grid, and so on. We have grid tracks. And a grid track is basically a row or a column. You can also look at it as the space between two adjacent grid lines. So for example if a grid starts of line 1 then it has line 2. The space between line 1 and 2 is basically a track or a column in our case. The space between let's say row line 2 and row line 3, that's also a track in our case it's a row. A grid cell is the intersection between a grid row and a grid column, it's basically one unit of the grid. And then finally we have grid area. This is an area defined between four grid lines. A grid area has at least one cell, and is always rectangular in shape. So, it can be a square, or a rectangle, but never a wonky shape like an l or something along those lines. It doesn't work like that. And that's a very quick look at the terminology of using CSS Grid. Now, let's start with some actual examples, and learn more about how to work with CSS Grid. We'll begin in the next lesson by learning how to define a grid container, coming up.