Intrinsic Design: Content-Driven Sizing
Embrace intrinsic sizing with min-content, max-content, and fit-content for content-driven layouts.
What is Intrinsic Design?
Intrinsic design, coined by Jen Simmons, means letting content determine its own size rather than imposing explicit pixel dimensions. CSS provides intrinsic sizing keywords that make layouts naturally responsive without breakpoint-driven overrides.
min-content and max-content
min-content: the smallest size that fits content without overflow (wraps at every word boundary for text). max-content: the size needed to display content on one line without wrapping. Both reflect actual content dimensions.
All lessons in this course
- Sticky Footer and Sidebar Layout
- Holy Grail Layout with Grid
- Masonry Layout: CSS and JS Approaches
- Intrinsic Design: Content-Driven Sizing