Before we dive into CSS Grid concepts, let’s cover some basic terminology.
The vertical and horizontal lines that divide the grid and separate the columns and rows.
A single unit of a CSS grid.
Rectangular space surrounded by four grid lines. A grid area can contain any number of grid cells.
The space between two grid lines. This space can be horizontal or vertical
A horizontal track of a grid.
A vertical track of a grid.
The space between rows and columns in a grid.
The container that holds the entire CSS grid. It will be the element that has the
display: grid or
display: inline-grid property on it.
Any element that is a direct child of a grid container.
Got it? Let's move on to creating our first grid with CSS Grid Layout.