The layout engines. Print it, pin it, internalize it.
The sheet#
| Class / pattern | Notes |
|---|---|
flex items-center justify-between | core pattern |
flex-col md:flex-row gap-6 | core pattern |
grid sm:grid-cols-2 lg:grid-cols-3 gap-8 | layout engine |
grid-cols-[200px_1fr] | layout engine |
col-span-2 / row-span-2 | core pattern |
How to practice#
- Rebuild one recipe from memory using only this sheet
- Add a screen prefix to every pattern
- Swap one palette across the whole sheet
- Then delete the sheet — the search bar is faster