From the course: CSS: Advanced Layouts with Grid

Terminology - CSS Tutorial

From the course: CSS: Advanced Layouts with Grid

Start my 1-month free trial

Terminology

“

- [Male Narrator] CSS Grid introduces some new terminology, so to give you a leg up, as you get started with this new layout module, I've created a handout explaining in plain language, the most common terminology for CSS Grid for your reference. The handout is in the Exercise Files under the Assets folder and you can either keep it on your computer for reference, or print it out. So, open the file and let's take a quick look at the basic concepts of CSS Grid. First off, Grid Container. A Grid Container is any element with its display property set to grid. In a single view, or single document in the browser, you can have as few or as many grid containers as you like, and you can also nest grid containers inside other grid containers. This is what we'll cover throughout this course. The direct first-level descendant element of a grid container become grid items. These are automatically placed on the grid, unless you specify otherwise and you can also precisely place each grid item inside the grid, exactly where you want it to appear. It's important to note that, just like with Flexbox, only first-level descendants of a grid container are placed on the grid. Children of these descendants are not affected by the grid at all. The grid container has four grid lines out of the box, the outer edges of the grid. You would typically add additional rows and columns, using row and column lines to segment a grid into cells. Grid lines are referenced by a number, starting and ending with the outer edges of the grid container, so the left and top edges are typically counted as line 1, and then each line is given an incremental number. CSS Grid honors the text direction of the current document, or even current element, so in left-to-right settings, the left outer edge is line 1 and the last line is the right outer edge. And in right-to-left settings, the numbering is reversed, starting with the right outer edge as line 1 and then ending with the left outer edge. You can refer to a grid line by its number or you can give grid lines custom names and then refer to them by their custom names. We'll cover that a little later on. A grid cell is the space between two adjacent horizontal and vertical lines, where a grid column and grid row intersect. So, pretty much exactly the same as a table cell. A grid track is the space between two or more adjacent grid lines, either horizontal or vertical. Row tracks are horizontal, column tracks are vertical. A grid area covers one or more cells and the purpose of a grid area is to define an area within the grid that can be referred to when grid items are placed. Finally, grid lines have no width by default, meaning each grid track is jammed up against the next one. You can add space between each grid track by adding a grid gap. The grid gap creates uniform gutters between each track, and you can choose to define a column gap, a row gap, or a gap for both columns and rows. Just remember, when you use grid track, you're effectively creating empty space between each grid track and that, in turn, means whatever color or item is appearing behind your grid will now shine through this grid gap. That gives you a quick overview of the general terminology we'll use throughout the rest of the course and now you're ready to start building your first grid.

Contents