Pathwise

Manuals / CSS Layout / Chapter 3

Core · intermediate · ~45 min · Chapter 3 of 3

CSS Grid

Two-dimensional layouts for pages and dashboards.

Path progress
83%

Step 1 of 2

Key idea

Grid defines rows and columns. Place items by line or area names.

Key ideaDrag stickies · tap for tips
Study mapDrag stickies · tap for tipsKeep it shortdrag · tap →Name the waitdrag · tap →Scope locatorsdrag · tap →Trace when stuckdrag · tap →One browser firstdrag · tap →Isolate statedrag · tap →Assert the UIdrag · tap →Retry wiselydrag · tap →Seed datadrag · tap →Close the loopdrag · tap →Keep it shortdrag · tap →Name the waitdrag · tap →Scope locatorsdrag · tap →Trace when stuckdrag · tap →One browser firstdrag · tap →Isolate statedrag · tap →Pathwise hackdrag · tap →Key ideadrag · tap →Go deeperdrag · tap →Follow the dashed drag · tap →
Docs

Quick check

fr units represent…

Do this now

Write 3 notes on: Grid.

Was this step clear?
Chapter learning outcomes
  • tracks
  • areas
  • minmax

Clear these before you leave

Next, learn…

Same neighborhood as CSS Layout — keep the momentum.

DesignGraphic Design
DesignFigma
DesignUI/UX Foundations
DesignDesign Thinking