C

CSS Grid Layout

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

Web Development v1.0.0 26 uses
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

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

  1. 1 Read each step's explanation of CSS Grid concepts
  2. 2 Use the interactive controls to adjust grid properties
  3. 3 Watch the live preview update in real time
  4. 4 Complete the quiz to solidify your understanding
X Facebook LinkedIn Reddit WhatsApp Telegram Pinterest Email

More Labs in Web Development

J

JSON & APIs

Web Development

Learn JSON syntax, parse and build data structures, and explore how REST APIs work interactively.
C

Color Theory for Developers

Web Development

Understand RGB, HSL, and hex colors — build palettes and explore contrast with interactive pickers.
I

Intro to HTML

Web Development

Learn the building blocks of the web — write your first HTML elements and see them render in real time.

Translate

ESC