Stage 1 · Lesson 7 of 9
CSS Grid
lays out children in rows and columns at the same time. You define the columns and rows, called tracks, on the container with grid-template-columns. The fr unit means a share of the free space, so 1fr 2fr gives the second column twice the room of the first.
Items fall into cells in order, or span several. repeat(auto-fill, minmax(220px, 1fr)) gives a card grid that wraps to fit any screen, with no . grid-template-areas lets you name the regions of a page layout, such as header, sidebar and main.
Use Grid for two dimensional layouts and for one dimensional rows inside them; most real pages use both.
Common trapusing Flexbox with percentage widths and negative margins to fake a grid, which Grid does in one line.
A question to check yourself, an AI practice session and 1 cheat sheet entry come with the full roadmap. Unlock
Resources for this stage
Start with· follow one of these
- CourseFreeThe Odin Project
The Odin Project · Beginner
Foundations course: HTML, CSS and the web built in your own editor, not a sandbox
- GuideFreeweb.dev
Google · Intermediate
Free Learn HTML, Learn CSS and Learn Accessibility courses explain the why behind layout