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

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.