CSS Grid Layout Examples

In this article, we will understand css grid layout terminologies with examples.

When we talk about CSS grid, we mainly have two entities a parent container which we term as the grid container, and the immediate children elements which we term as grid items. In the above sample HTML code, the parent div is the grid container and all the children divs are the grid items. It is very important to keep this in mind.

Terminology of Grid layout

Grid line

A grid line is the horizontal or vertical dividing line in a grid. The above image’s orange line is an example of a column grid line as it is a vertical line. If it is horizontal it is called a row grid line.

Grid Cell

We have a grid cell which is the smallest unit you can have on your CSS grid. It is the space between four intersecting grid lines as you see above image denoted by the orange square.

Grid track

We also have a grid track in the above image, which is space between the adjacent grid lines. It is denoted by the green portion on the screen.

Grid area

In the above image, we have a grid area which is the total space surrounded by four grid lines. The grid area may be composed of any number of grid cells.

Conclusion

Now, these terms you don’t have to memorize the very first time. However, it does help when learning the different properties of CSS. Understanding CSS grid is basically getting familiar with the properties associated with grid containers and grid items.

Learn also: how to add space between flex items using flex gap property