W11 // LAYOUTS AND CSS GRID
OCT 28 · Ch 5 Sec 5-7 · DUE: Assignment 5 (grid layout page)
This week's deckPPTX
// RUN OF SHOW (8:45-10:15)
8:45
Stand-up: last week's deliverable graded, questions answered
9:20
At the keyboard: guided type-along
9:45
Build time: assignment or project work
10:10
Close: commit, push, and preview next week's reading
// THE POINT THIS WEEK
Layout patterns. Width and display. Building a page with CSS Grid.
// TALKING POINTS
Grid thinks in tracks
- display: grid turns a container into rows and columns
- grid-template-columns: 200px 1fr means fixed sidebar, flexible main
- gap replaces margin arithmetic; let the container handle spacing
Layout is a plan, not an accident
- Sketch regions on paper before writing a single rule
- fr units share leftover space in ratios: 2fr 1fr is a two-thirds split
- Resize the window constantly; layouts are judged in motion
// LINKS