Senior LevelCSS & Modern Layouts
What are CSS intrinsic sizing keywords: min-content, max-content, and fit-content?
❓ Interview Prompt: Explain intrinsic sizing keywords and their use in Grid column definitions and responsive layouts.
CSS intrinsic sizing keywords size elements based on their content rather than explicit dimensions:
•
`min-content`: The smallest width possible without overflowing. Text wraps at every opportunity (longest word sets the width).
•
`max-content`: The width needed to display all content on a single line without wrapping.
•
`fit-content(max)`: Behaves like
min(max-content, max(min-content, argument)). Content shrinks to fit but never exceeds the specified maximum.Use in CSS Grid:
grid-template-columns: min-content 1fr max-content — first column wraps to narrowest, middle fills space, last column fits content.
Code Implementation Example
css
/* Grid with intrinsic column sizing */
.layout {
display: grid;
grid-template-columns: min-content 1fr fit-content(300px);
gap: 20px;
}
/* Button that fits its text content */
.btn {
width: fit-content;
padding: 12px 24px;
}
/* Sidebar sized to content */
.sidebar {
width: max-content;
max-width: 300px;
}💡Intrinsic sizing for grid columns, buttons, and sidebars.
🎯 Interview Key Takeaway
Use min-content for compact columns, max-content for content-sized elements, and fit-content for capped flexibility.
#Intrinsic Sizing#Grid#Layout#Senior
Back to all CSS & Modern Layouts Questions→