Grid Basics

Grid Basics: CSS Grid: Rows and Columns, Placing Items: Lines, Spans and Named Areas.

Updated November 10, 2026

1. CSS Grid: Rows and Columns (Apprentice): CSS Grid turns a box into an ice cube tray of rows and columns, so a photo gallery, a product page or a calendar lines up both ways at once with a few lines of CSS.
2. Placing Items: Lines, Spans and Named Areas (Journeyman): Put any grid item exactly where you want it, by the numbered lines around its cells or by drawing the whole page as named areas, so a featured photo can fill four cells and a sidebar can sit beside the main content.