Intrinsic Sizing
Intrinsic sizing describes how elements determine their dimensions based on their content. min-content, max-content, and fit-content() provide more expressive sizing than simple fixed dimensions.
Intrinsic sizing is particularly useful for navigation labels, tables, cards, and responsive components.
Intrinsic Sizing
Intrinsic Grid Sizing
.layout {
display: grid;
grid-template-columns: max-content 1fr;
}
.sidebar {
width: fit-content;
max-width: 20rem;
}💡 The first column can size itself around its content while the second column consumes remaining space.
Key Takeaways
- Intrinsic sizing lets content participate directly in layout decisions.
min-contentandmax-contentrepresent different intrinsic constraints.
Knowledge Check
What does `max-content` generally represent?