grid-cols-*, flex, w-*/h-*, max-w-*, hidden/block by screen. Print it, pin it, internalize it.
The sheet#
| Class / pattern | Notes |
|---|---|
grid grid-cols-3 gap-4 | layout engine |
w-1-2 / w-1-3 / w-2-3 | core pattern |
max-w-3 / max-w-5 | core pattern |
hidden md:block | core pattern |
absolute / relative / sticky | 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