The fit-content function in CSS
The fit-content function taks a parameter of length or percentage, let’s call it len
, and feeds it to fit-content formula creating the following equivalence:
min(max-content, max(min-content, len)) = fit-content(len)
Let’s set a grid column width
with fit-content
as an example (which is a good idea, since it’s not widely supported for the standard height
and width
properties).
#fit-content-example {
display: grid;
place-content: center;
grid-template-columns: fit-content(10em);
}
#fit-content-example > div {
outline: 1px solid orange;
}
Try adding more content to the input box below the example content and see how, once it hits a width of 10em, it switches from using max-content
to using the max of min-content
and, in this case, 10em.
Example Content
A useful function!