CSS Grid Generator

Grid template syntax

• 1fr 1fr 1fr — 3 equal columns
• 200px 1fr — fixed sidebar + flexible content
• repeat(3, 1fr) — same as 1fr 1fr 1fr
• repeat(auto-fit, minmax(200px, 1fr)) — responsive cards that wrap automatically
• minmax(100px, 1fr) — minimum 100px, otherwise flexible

Holy Grail layout

Header + sidebar + content + aside + footer — historically painful, trivial with Grid:

grid-template-areas:
  "header header header"
  "nav    main   aside"
  "footer footer footer";