fit-content()

Gabriel Shoyombo on Aug 5, 2025

The CSS fit-content() function combines the max() and min() functions in a single formula to calculate an element’s size that looks like this:

min(max-content, max(min-content, <length-percentage>))

fit-content() is a dynamic sizing function, as it scales to fit the element’s natural size (max-content). However, it won’t expand beyond the value provided in its argument; neither will it shrink beyond the minimum content size in the element (min-content).

div {
  display: grid;
  grid-template-columns: 1fr 1fr fit-content(200px);
}

It is used specifically for defining grid layout tracks in CSS Grid, specifically with the grid-template-columns and grid-template-rows properties.

The fit-content() function is defined in the CSS Box Sizing Module Level 3 and CSS Grid Layout Module Level 2 specifications.

Syntax

<fit-content()> = fit-content(<length-percentage>)
<length-percentage> = <length> | <percentage>

This is basically saying that fit-content() takes a single argument that is formatted either as a length or percentage.

Argument

These are all valid examples of arguments supported by the fit-content() function:

fit-content(100px) /* ✅ */
fit-content(20vw) /* ✅ */
fit-content(5rem) /* ✅ */
fit-content(10%) /* ✅ */

It won’t work if the argument is a negative value:

fit-content(-20px) /* ❌ */
fit-content(-40%) /* ❌ */

…or if it is a fractional unit:

fit-content(1fr) /* ❌ */

Length values are absolute, while percentages are relative to the available space in the container’s given axis. For instance, in grid containers, the percentage value is relative to the inline size in column tracks and the block size for row tracks. In future scenarios (like in width), it may depend on the text flow.

If no argument is provided, then fit-content() is invalid. So, this does not work:

fit-content() /* Needs an argument */

It only works with two properties

While fit-content() is defined to work in most properties that take a length/percentage, in reality, it will is only valid in CSS grid properties, specifically in grid-template-columns and grid-template-rows to define track sizes.

It can be used to define columns that adjust to content but don’t exceed a specified width. For example, grid-template-columns: fit-content(100px) auto; ensures the first column fits its content up to 100px, while the second takes the remaining space.

Basic usage

Rather than defining grid items to fill a statically-defined width, which the content may or may not fill, you can use fit-content() to mark out a width based on the size of each grid item’s content:

.grid-container {
  display: grid;
  grid-template-columns: fit-content(100px) fit-content(300px) auto;
}

This way…

The first column sizes the content up to 100px, so the text inside wraps since it’s clamped to 100px.
The second is the same as the first, but up to 300px, so the text max width is also to 300px.
The third takes one fraction of the available space, which in this case, is the remaining space.

Comparing CSS `fit-content()`, `max-content`, and `min-content`

The fit-content(), max-content, and min-content values are used to size elements, each controlling how elements adapt to their content and available space, with some differences:

	`fit-content()`	`max-content`	`min-content`
Definition	Sizes an element to its content’s `max-content` size, up to a specified maximum (e.g., `fit-content(250px)`), but never below `min-content`.	Sizes an element to the largest size its content can take without wrapping, i.e., the intrinsic maximum width or height.	Sizes an element to the smallest size its content can take, considering wrapping or breaking at the narrowest point (e.g., longest word or unbreakable element).
Syntax	`fit-content(<length-percentage>)`	`max-content` (no parameters).	`min-content` (no parameters).
Behavior	Balances content size with a cap. For `fit-content(250px)`, the element is as wide as its content up to 250px, but won’t shrink below `min-content`.	Prioritizes content without constraints, taking the full width/height needed for content without wrapping, even if it causes overflow.	Prioritizes minimal space, shrinking to the smallest width/height possible, often causing content to wrap or break.
Use cases	Used to dynamically set the width of a grid item to its content, which is maxed at the provided value.	Ensures a label or heading takes its full content width without wrapping, useful for non-wrapping text like titles.	Works best for shrinking containers to the smallest size (e.g., for icons), maximizing space for others.

Specification

The fit-content() function is defined in the CSS Box Sizing Module Level 3 and CSS Grid Layout Module Level 2 specifications, both currently in Editor’s Draft.