Heydon Pickering & Andy Bell published series of articles on their blog focusing on CSS layout.
If you find yourself wrestling with CSS layout, it’s likely you’re making decisions for browsers they should be making themselves. Through a series of simple, composable layouts, Every Layout will teach you how to better harness the built-in algorithms that power browsers and CSS.
Employing algorithmic layout design means doing away with @media breakpoints, “magic numbers”, and other hacks, to create context-independent layout components. Your future design systems will be more consistent, terser in code, and more malleable in the hands of your users and their devices.
Source: https://every-layout.dev
The layouts guides include:
- The Stack
- Teh Box
- The Center
- The Cluster
- The Sidebar
- The Switcher
- The Cover
- The Grid
Each guide provides the problem statement, the solution, use cases and more. Really useful!
[Read More]