ReferenceWebsiteVisual Design

Grid by Example

Rachel Andrew

intermediateFree1 hourGrid by Example

It turns the grid theory you learn from Müller-Brockmann into working CSS Grid patterns you can actually ship. Use it as a lookup when you know the layout you want and need the grid code. It bridges classic grid thinking and the modern browser.

What you will learn

  • Practical CSS Grid patterns
  • Translating grid theory to code

How to study it

  1. Read it once, then state the single core claim in your own words without looking. If you cannot, you did not read it closely enough yet.
  2. Note one thing you will change in your own work because of it. An article that changes nothing was entertainment, not study.
  3. Revisit it once a week later; the second pass with a gap is where it sticks.