Etherpads

• Gather Links
• Drop Questions

Writing Mode examples

A Study of Three Properties

• Writing Mode 1A

Vertical vs Sideways

• Writing Mode 2A
• Writing Mode 2B
• Writing Mode 2C
• Writing Mode 2D
• Writing Mode 2E

Logo Layout

• Writing Mode 3A

Headline Options

• Writing Mode 4A
• Writing Mode 4B
• Writing Mode 4C
• Writing Mode 4D

Alignment & stuff

• Test of combining Alignment Properties and Grid Auto Flow

Get the Bleeding Edge Grid Inspector Tool

• Download Firefox Nightly

Exercise Set 1

• Exercise 1 — Make a simple Grid
• Exercise 2 — Make a ratio-based Grid
• Exercise 3 — Make a Responsive Grid
• Exercise 4 — Explicitly Place Items
• Exercise 8 — Make a simple Grid
• Exercise 9 — Place items on that Grid

Running Grid Demos

• Jazz Poster Demo or on CodePen
• Computer Product Layout — Combining Flexbox and Grid Together
• 5 Basic Examples of how CSS Grid Works
• Simple Grid Area Demo

CSS Grid Layout examples

Set 1

• Grid 1A
• Grid 1B
• Grid 1C
• Grid 1D
• Grid 1E
• Grid 1F
• Grid 1G
• Grid 1H
• Grid 1I
• Grid 1J

Set 2

• Grid 2A
• Grid 2B
• Grid 2C

Exercises 1–7

• Exercise 1 — Make a simple Grid
• Exercise 2 — Make a ratio-based Grid
• Exercise 3 — Make a Responsive Grid
• Exercise 4 — Explicitly Place Items
• Exercise 5 — Make certain Grid Items bigger
• Exercise 6 — Auto Flow Spare vs Dense
• Exercise 7 — Put It All Together

Exercises 8-11

• Exercise 8 — Make a simple Grid
• Exercise 9 — Place items on that Grid
• Exercise 10 — Make the items overlap
• Exercise 11 — Put It All Together

Flow-root Demo

• Demo of Clearfix & flow-root
• Same Demo using Flexbox
• Same Demo using Grid

Resources for More

• The CSS Grid Layout Spec
• Grid on MDN
• jensimmons.com
• @jensimmons
• Layout Land
• Grid by Example, example gallery
• The CSS Layout Workshop, video series
• CSS Layout News, weekly newsletter
• rachelandrew.co.uk
• @rachelandrew