Let's start by learning some CSS grid terminology and how it applies to the anatomy of a grid layout. Take a look at the following image, which demonstrates a basic grid layout, and then click on each term in the table blow to learn more.
| Term | Definition |
|---|---|
|
The grid container is the parent element that establishes the grid's display type. |
|
|
These are the horizontal and vertical lines that create the structure of the grid. They are used for positioning items on the grid. |
|
|
These are the child element(s) that occupy the space between adjacent grid lines, within the parent grid area. |
|
|
This is the content inside a grid cell. |
|
|
This is the area between grid lines (columns & rows), where grid cells display grid items. |
|
|
This is the total space of any grouping of cells within the grid, surrounded by grid lines. |
|
|
The empty space between grid lines that separate the grid tracks (columns and rows). |
Now that we know some basic terminology, it's time to start building a grid!
Question
What is the purpose of the CSS grid?
To bring order and organization to a web layout, by grouping and organizing content into grid areas, using columns and rows that dynamically flow throughout the page.
