Retour au cours

Lesson 66: Introduction to CSS Grid Layout (2D System)

**La Maîtrise de CSS : De zéro à expert en 100 leçons** *(Alternative, slightly punchier version using a common French idiomatic structure for full coverage: CSS : Maîtrisez l'essentiel en 100 leçons, but the first option is closer to the original progression.)*

66. Introduction to CSS Grid Layout (2D System)

CSS Grid is the most powerful layout system, designed for creating complex, two-dimensional (rows and columns) page layouts. While Flexbox is for laying out components in a single direction, Grid is for laying out the entire page structure.

The Grid Model

Grid involves three main concepts:

  1. Grid Container: The parent element where display: grid; is applied.
  2. Grid Items: The direct children of the container.
  3. Grid Lines, Tracks, and Areas: The structure that defines the layout.
  • Tracks: The space between two grid lines (the columns and rows).
  • Lines: The horizontal and vertical dividing lines that make up the grid structure.

Getting Started

To activate Grid, apply the display property to the parent:

html

Header
Content
Footer

css .grid-container { display: grid; /* Without defining rows/columns, items simply stack vertically, one per row */ }

Key Benefit: Grid allows you to define the structure of the container first, and then place the items exactly where you want them in that structure.