Lesson 1 of 3 · 10 min

CSS Grid

Grid lays out pages in two dimensions: display: grid with grid-template-columns: 1fr 1fr 1fr.

gap adds consistent spacing without margin hacks.

Practice

Build a three-column photo gallery that collapses to one column on small screens.

Optional resources

No purchase or partner signup is required to complete this course or earn quiz points.

These are official product links, not active affiliate links. Learnly does not currently earn a commission from them.

Reference grid, media queries and transitions as you build.

Free documentation.

Prototype layouts and hover effects in the browser.

Free plan available; Pro features optional.