Basic CSS Grid Terminologies You Should Know

Let’s take a look at the CSS grid terminologies you absolutely have to 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:

https://cdn-images-1.medium.com/max/1000/1*xcID2GAZoYqhb4LYjN6Qug.png


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

https://cdn-images-1.medium.com/max/1000/1*9K74dULhLERm5_3a37Byqw.png


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.

https://cdn-images-1.medium.com/max/1000/1*7X_NTZG0ikpVwsaB0qfdAw.png


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.

https://cdn-images-1.medium.com/max/1000/1*_4ZnWO3zlt82VMHQ_3VNXA.png


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.

https://cdn-images-1.medium.com/max/400/1*oan28239S-v0oJZECQPKIA.png

https://cdn-images-1.medium.com/max/400/1*-tby4L7UaQavuy6uc0H1LQ.png

https://cdn-images-1.medium.com/max/400/1*xkbT0CjkBWb-5S_hxcBvGw.png


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

Let’s move on 😃

Create a free account to view this lesson.

Continue your learning journey with a 14-day free trial.

By signing up, you agree to Educative's Terms of Service and Privacy Policy