CSS Grid Terminology You Need to Know

September 20, 2017 | CSS, CSS Grid

Css grid terminology

When you started learning CSS Grid you have probably come across some terminology that made you wonder what exactly it is. Some of the time you are pretty sure you know but you've never seen it explained and so you aren't positive.

Instead of being able to learn CSS Grid you're left wondering what exactly the tutorial you're reading or watching is referring to.

You might have looked at the CSS Grid Specification Documentation to try to understand but found the explanations vague and/or confusing. For example, in the specification you find the following definition of a grid container:

The grid is an intersecting set of horizontal and vertical grid lines that divides the grid container’s space into grid areas, into which grid items (representing the grid container’s content) can be placed.

You're left more confused than when you started.

If you have have been confused about any of the CSS Grid Terminology, I'm going to walk you through the terminology you need to know with clear, easy to understand descriptions as well as visuals so that you can fully understand what each term means.

Grid Container

Grid Container

The grid container is the element that contains a grid. It is the wrapper for your grid. A grid container is created by assigning your element the following css: display: grid;

Grid Container Grid View

You can create as many grids or nested grids on your page as you would like. There are no limits, expect what you can keep track of.

You can also make any element in your HTML document a grid container. It can be a div, a paragraph, a span, or any other element.

I like to create a grid class in my css that looks something like this:

.grid {
  display: grid;
}

So, then any time I want to create a grid all I need to do is give any element a class of grid: class="grid".

Grid Item

Grid Items Grid View

A grid item is a direct descendant of a grid container. Grid items are created automatically when you create your grid container using display: grid;.

Keep in mind that only the first level descendants are grid items: Grid Items

Grid Lines

Grid lines are the horizontal and vertical lines that divide the grid. There are horizontal grid lines: Horizontal Grid Line

And vertical grid lines: Vertical Grid Line

Each grid line automatically has reference numbers that you can use to target it. You can also assign the grid lines names but I'll explain that another day.

The horizontal grid line reference numbers look like this: Grid Column Lines

The vertical grid line reference numbers look like this: Grid Row Lines

Or here are the reference numbers all together: Grid Lines Reference Numbers

Grid Track

A grid track is the generic term for the grid lines. The grid column track is the same as, just more generic term for the vertical grid line: Grid Column Track

And the grid row track is the same as, just more generic term for the horizontal grid line: Grid Row Track

They are basically the same thing, and you will find them used interchangeably. The biggest difference is that the grid lines have a reference number and are a more specific type of grid track.

Grid Cell

A grid cell is one cell inside your grid container. It is the intersection between a grid row and a grid column.

Grid Cell

A grid cell is the smallest unit of the grid and can be referenced using the grid line reference numbers.

Grid Area

The grid area is a defined rectangular area inside your grid that contains more than one cell.

Grid Area

Grid Gap

Grid gap is the space or gutter between grid cells.

Grid Gap

That is the basic terminology you will need to know in order to understand most tutorials and videos on CSS Grid.

Want to Improve Your Designs?

Get my best articles, design tips and other resources once a week.

If I don't help you improve your designs, unsubscribe at any time.

Sign Up For Free

×

Sign In

×