This content originally appeared on CSS-Tricks and was authored by Chris Coyier
Ahmad Shadeed covers the CSS fit-content sizing keyword. It’s useful! It just doesn’t come up super often. I find myself using min-content a lot more, like when setting up the height of a grid-template-row.
The fit-content keyword is actually closely related to min-content and max-content — it just has a little heuristic it follows that Ahmad nicely illustrates as a flow chart.
My favorite use case is covered here: sizing a <figure> with fit-content, so that it neatly wraps around the <img>. That way, even if the image doesn’t fill the parent space, and it can remain block-level.
We also covered PPK’s deep dive on fit-content last year. One of the key takeaways for understanding it is knowing that is it essentially a shorthand way of writing:
.box {
width: fit-content;
/* ... is the same as ... */
width: auto;
min-width: min-content;
max-width: max-content;
}To Shared Link — Permalink on CSS-Tricks
Ahmad Shadeed: Use Cases For CSS fit-content originally published on CSS-Tricks. You should get the newsletter.
This content originally appeared on CSS-Tricks and was authored by Chris Coyier
Chris Coyier | Sciencx (2022-03-01T15:41:16+00:00) Ahmad Shadeed: Use Cases For CSS fit-content. Retrieved from https://www.scien.cx/2022/03/01/ahmad-shadeed-use-cases-for-css-fit-content/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.