The CSS Grid Terminologies you Should Know

Ohans Emmanuel

Published in

Flexbox and Grid

4 min readMay 8, 2017

Here is a collection of the fundamental terminologies you need to know to use the CSS Grid layout model effectively.

Let’s get started.

1. What is a Grid Container?

A Grid container is the container for which display: grid is set. In technical terms, a grid container is the container for which a grid formatting context is set.

Grid formatting context is a fancy way to say, “set up a container whose formatting is based on the rules of the Grid model”

Example

Consider the markup below:

p {
  display: grid;
}

The paragraph element above is a grid container. It sets a grid formatting context via display: grid

In the example above, the pelement has been set to be formatted based on the Grid model.

2. What is a Grid Item?

In 1 above, we looked at grid-containers.

Assume that the paragraph in 1 had a markup as follows:

<p>
  <div></div>
  <div></div>
</p>

With p been a grid container, the div elements are automatically grid items.

Technically, the children elements of a grid-container are called grid-items. Emphasis on “children”

Strictly speaking, grid items are not restricted to only elements. e.g. the two div elements above. Anonymous bits of texts may also be grid items.

Example

Consider the markup below:

<p>
  <div></div>
  I am a text
  <div></div>
</p>

Notice how I am a text is NOT in a separate div

In the markup above, both div items are grid-items , AND so is I am text

In conclusion, the markup has 3 grid items — the 2 div elements and the text, I am a text.

3. What is a Grid Line?

Assume for a bit that we have a fully laid out grid layout like this:

The layout comprises a grid container with a number of perfectly laid out grid items.

The grid items are represented by the little square boxes within the outer container.

Now, what’s a grid line?

A grid line is a little difficult to describe.

Take a look at the reference image above. Every straight line you see there is essentially a grid line.

4. What is a Grid Cell?

Again, take a look at the reference image above.

A Grid cell is the smallest unit of area in a grid layout. The small boxes of grid items may be referred to as grid cells.

More appropriately, a grid cell is any space bounded by four grid lines.

See the example grid cell below:

5. What is a Grid Area?

A grid area is pretty easy to understand.

Remember I said the grid cell is the smallest unit of a grid area? Yes, that is right!

A grid area may be as small as the area contained within a grid cell, or as large as all the cells within the grid.

In the image below, the area covered by the four cells is also a grid area.

Conclusion

It’s easy to take fundamental concepts like the ones shared in this article for granted. But like a wise man once said, “the master of the basics is the true master of the skill”.