Width and Height
CSS supports fixed dimensions such as px, relative dimensions such as %, viewport units such as vw and vh, and intrinsic keywords such as auto, min-content, max-content, and fit-content.
Avoid forcing fixed heights on content-heavy components unless the design genuinely requires them. Content can vary due to localization, user settings, and responsive layouts.
CSS Sizing Constraints
Flexible Sizing
.container {
width: min(100% - 2rem, 1200px);
min-height: 100dvh;
}
.card {
width: min(100%, 420px);
min-height: 200px;
}💡 Functions such as
min() allow CSS to express responsive constraints without many media queries.Key Takeaways
- Prefer intrinsic and fluid sizing where appropriate.
- Use fixed dimensions only when the component genuinely needs fixed geometry.
Knowledge Check
Which function is useful for selecting the smaller of multiple sizing constraints?