Grid Layout Demo

Live demo from class: the same page laid out four ways. Open each one and compare the CSS.

Design

Files

1. 01-linear.html: normal flow, no layout
2. 02-flexbox.html: Flexbox, using extra container elements for rows
3. 03-grid.html: CSS Grid
4. 04-responsive-grid.html: CSS Grid, responsive
5. styles.css: shared styling (colors, fonts, spacing), used by all four

Right-click a link to save the file.