Firefox DevTools

Introduction to CSS Grid Layout

Launch Video Playerplay icon

Terminology

Before we dive into CSS Grid concepts, let’s cover some basic terminology.

Grid lines
Grid lines

The vertical and horizontal lines that divide the grid and separate the columns and rows.

Grid cell
Grid cell

A single unit of a CSS grid.

Grid area
Grid area

Rectangular space surrounded by four grid lines. A grid area can contain any number of grid cells.

Grid track
Grid track

The space between two grid lines. This space can be horizontal or vertical

Grid row
Grid row

A horizontal track of a grid.

Grid column
Grid column

A vertical track of a grid.

Gutter
Gutter

The space between rows and columns in a grid.

Grid container

The container that holds the entire CSS grid. It will be the element that has thedisplay: grid or display: inline-grid property on it.

Grid item

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.

Get the browser with the best tools for Developers