The fit-content function in CSS

2020-04-12

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.

A useful function!