0 0
WP Ad Inserter plugin
Read Time:56 Second

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.

“Use Cases For CSS fit-content” by Ahmad Shadeed

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;
}

Direct Link →

Source: https://css-tricks.com/ahmad-shadeed-use-cases-for-css-fit-content/

IE Down, Edge Up… Global Browser Usage Stats Are for Cocktail Parties and Conference Slides Previous post IE Down, Edge Up… Global Browser Usage Stats Are for Cocktail Parties and Conference Slides
CSS Custom Highlight API: The Future of Highlighting Text Ranges on the Web Next post CSS Custom Highlight API: The Future of Highlighting Text Ranges on the Web

Leave a Reply

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.