Basic CSS Grid Terminologies You Should Know

What is a Grid Container?

Every website or application layout you make (or have seen) is essentially boxes placed within certain defined boundaries.

In very simple terms, a grid is just ‘lines’. Horizontal and vertical lines that define the placement of other design elements.

You’ll be familiar with this if you use design software such as Adobe Photoshop or Sketch.

In the context of the CSS Grid layout, a grid container is a parent that contains all the items in the grid. The Grid container defines the initial placement of the grid lines, both vertical and horizontal.

What is a Grid Line?

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

The layout comprises a grid container with a number of perfectly laid out grid items (child elements within the grid)

Grid lines are the horizontal and vertical lines that divide the grid.

What is a Grid Cell?

A Grid cell is the smallest unit of area in a grid layout. It is any space bounded by four grid lines.

Grid Area

A grid area may be as small as the area contained within a grid cell (shown above). It may also be as large as all the cells within the grid. In the image below, the area covered by the four cells is a grid area.

What is a Grid Track

I don’t like very technical definitions. So, a grid track may be seen as a fancy name for columns and (or) rows. It is the space between any two grid lines.

The images below show example grid tracks.

So, we’ve got the first piece of the CSS grid puzzle sorted out.

Let’s move on 😃