CSS Grid Layout

Build two-dimensional layouts with CSS Grid — define rows, columns, and place items with interactive controls.

Category: Web Development · v1.0.0

Step 1 of 4

Step 1: What is CSS Grid?

CSS Grid is a two-dimensional layout system — it handles both rows and columns simultaneously.

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;  /* 3 equal columns */
  grid-template-rows: auto auto;        /* 2 rows */
  gap: 16px;                            /* spacing */
}

Key terminology:

fr — fractional unit (shares available space)
gap — spacing between grid cells
grid-template-columns — defines column tracks
grid-template-rows — defines row tracks

Step 2: Columns & Rows

Adjust the grid template and see how items reflow:

Columns

Gap

Items

display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 16px;

Step 3: Alignment & Placement

Control how items align within cells:

justify-items

align-items

justify-items: stretch;
align-items: stretch;

About This Lab

CSS Grid is the most powerful layout system in CSS, designed for two-dimensional layouts. In this lab, you'll learn to define grid containers, create rows and columns with grid-template, place items into cells, and control gaps and alignment — all with interactive controls and instant visual feedback.

How It Works