CSS fit-content() Function

CSS fit-content() Function

The CSS fit-content() function sizes a grid track according to its content while limiting how large the track can grow.

It is commonly used with CSS Grid properties such as grid-template-columns and grid-template-rows. The function accepts a length or percentage and balances the content's minimum size, maximum size, and the specified limit. It is different from the fit-content keyword, which does not accept an argument.

Syntax

fit-content(length)
fit-content(percentage)

The function accepts one length or percentage that acts as a preferred upper limit for the track.

For example:

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

The first column sizes according to its content, with a preferred maximum of 200 pixels. The second column uses the remaining available space.

Additional examples:

grid-template-columns: fit-content(100px) 1fr;
grid-template-columns: fit-content(20rem) 1fr;
grid-template-columns: fit-content(40%) 1fr;
grid-template-rows: fit-content(150px) auto;
grid-auto-columns: fit-content(180px);

The specified limit is not always an absolute maximum. A grid item's automatic minimum size can force the track to grow beyond it.

The function returns a track sizing value when used in CSS Grid.

Parameters

The fit-content() function accepts one required parameter.

For example:

fit-content(250px)
fit-content(18rem)
fit-content(35%)

Only one argument is accepted.

The following is invalid:

fit-content(100px, 200px)

Use minmax() when you need to specify separate minimum and maximum track sizes.

How It Works

The fit-content() function balances three values when sizing a grid track:

1. The track's automatic minimum size.
2. The maximum size needed to display its content without wrapping at soft wrap opportunities.
3. The limit supplied to fit-content().

The grid track sizing calculation can be represented as:

max(auto minimum, min(specified limit, max-content))

For example:

grid-template-columns: fit-content(200px) 1fr;

If the first column's content needs only 100 pixels, the column can remain approximately 100 pixels wide.

If the content would prefer 300 pixels, the track can be limited to 200 pixels, allowing content to wrap where possible.

If an unbreakable item requires more than 200 pixels as its automatic minimum, the track may grow beyond the specified limit.

The exact result depends on the grid items' intrinsic sizes, minimum size constraints, and available space.

Grid Track Sizing

A grid track is the space between two adjacent grid lines. Columns and rows are both grid tracks.

The fit-content() function allows a track to grow with its content without automatically occupying all available space.

For example:

.grid {
  display: grid;
  grid-template-columns: fit-content(180px) 1fr;
  gap: 10px;
}

The first column uses content-based sizing with a limit of 180 pixels.

The second column uses the flexible 1fr unit.

This combination is useful when one column should remain compact and another should expand.

Unlike a fixed-width column, a fit-content() track can be narrower than its specified limit when its content requires less space.

Length Values

Length values provide a size limit using CSS units.

For example:

grid-template-columns: fit-content(150px) 1fr;
grid-template-columns: fit-content(12rem) 1fr;
grid-template-columns: fit-content(25vw) 1fr;

Different units can be useful in different layouts.

The limit influences the track's preferred maximum size, but the content's automatic minimum can still affect the final result.

Percentage Values

The fit-content() function also accepts percentages.

For example:

.grid {
  display: grid;
  grid-template-columns: fit-content(40%) 1fr;
}

For column tracks, the percentage is relative to the grid container's inline size.

For row tracks, the percentage is relative to the grid container's block size.

For example, if a grid container has a definite width of 500 pixels, fit-content(40%) provides a limit of 200 pixels for a column track.

The column may still be narrower if its content needs less space, or wider if its automatic minimum size requires it.

Percentage-based track sizing can behave differently when the grid container's corresponding size is indefinite.

Use a definite container size when you need a predictable percentage-based limit.

Grid Columns

The most common use of fit-content() is controlling grid column widths.

For example:

.layout {
  display: grid;
  grid-template-columns: fit-content(180px) minmax(0, 1fr);
  gap: 15px;
}

The first column grows according to its content, up to its preferred limit of 180 pixels.

The second column fills the remaining space.

Using minmax(0, 1fr) for the flexible column allows it to shrink below its content's automatic minimum when necessary.

Another example:

.three-column-grid {
  display: grid;
  grid-template-columns: fit-content(120px) minmax(0, 1fr) fit-content(160px);
  gap: 10px;
}

This creates two content-sized outer columns and one flexible center column.

It can be useful for layouts containing navigation, main content, and supplementary information.

Grid Rows

The fit-content() function can also control grid row heights.

For example:

.layout {
  display: grid;
  grid-template-rows: fit-content(100px) 1fr;
  height: 300px;
}

The first row sizes according to its content with a preferred maximum of 100 pixels.

The second row uses the remaining available height.

If the first row contains more content than fits within 100 pixels, its automatic minimum size can cause it to exceed the specified limit.

Another example:

.panel {
  display: grid;
  grid-template-rows: fit-content(80px) minmax(0, 1fr) fit-content(60px);
  height: 350px;
}

This creates content-sized header and footer rows with a flexible middle row.

For reliable height calculations, give the grid container a definite height when appropriate.

Intrinsic Sizing

Intrinsic sizing uses the content itself to help determine an element's or grid track's dimensions.

Two important intrinsic sizing keywords are min-content and max-content.

For example:

grid-template-columns: min-content max-content fit-content(200px);

Each track uses a different sizing strategy.

The automatic minimum used by fit-content() is often similar to min-content, but it is not always identical.

Grid item minimum size properties and intrinsic content contributions can affect the result.

fit-content() vs. fit-content

The fit-content() function and the fit-content keyword are related but are not interchangeable.

For example:

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

The first declaration uses the function to size a grid column.

The second uses the keyword to size an element according to its content and available space.

Newer CSS Box Sizing specifications also define the function for element sizing properties. However, that use does not have the same established cross-browser support as CSS Grid track sizing.

fit-content() vs. minmax()

Both functions are used for CSS Grid track sizing, but they provide different controls.

For example:

grid-template-columns: fit-content(200px) 1fr;
grid-template-columns: minmax(100px, 200px) 1fr;

The first column uses content-based sizing and can remain smaller than 200 pixels.

The second column has a specified minimum of 100 pixels and maximum of 200 pixels.

Use fit-content() when the content should determine the track's size within a preferred limit. Use minmax() when explicit minimum and maximum sizing rules are needed.

Example

This example demonstrates a content-sized column beside a flexible column.

HTML:

<div class="fit-demo">
  <div class="fit-demo-label">Short Label</div>
  <div class="fit-demo-content">This column fills the remaining available space.</div>
</div>

CSS:

.fit-demo {
  display: grid;
  grid-template-columns: fit-content(150px) minmax(0, 1fr);
  gap: 10px;
  max-width: 450px;
  margin: 0 auto;
}
.fit-demo-label,
.fit-demo-content {
  padding: 12px;
  font-size: 14px;
}
.fit-demo-label {
  background-color: #0066cc;
  color: #fff;
}
.fit-demo-content {
  min-width: 0;
  background-color: #e8f1fb;
  color: #333;
}

The first column sizes according to its label rather than automatically expanding to 150 pixels.

The second column receives the remaining space. On narrower screens, the text can wrap as needed.

Sidebar Example

This example uses fit-content() to create a compact sidebar beside a flexible content area.

HTML:

<div class="fit-sidebar-demo">
  <aside class="fit-sidebar">
    <strong>Navigation</strong>
    <span>Home</span>
    <span>Tutorials</span>
    <span>Reference</span>
  </aside>
  <main class="fit-main">
    <strong>Main Content</strong>
    <p>The main area uses the space remaining after the sidebar is sized.</p>
  </main>
</div>

CSS:

.fit-sidebar-demo {
  display: grid;
  grid-template-columns: fit-content(140px) minmax(0, 1fr);
  gap: 12px;
  max-width: 480px;
  margin: 0 auto;
}
.fit-sidebar {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  background-color: #0066cc;
  color: #fff;
  font-size: 13px;
}
.fit-sidebar strong {
  color: #fff;
}
.fit-main {
  min-width: 0;
  padding: 12px;
  background-color: #e8f1fb;
  color: #333;
}
.fit-main p {
  margin: 8px 0 0;
  font-size: 13px;
  line-height: 1.5;
}

The sidebar takes the space needed by its content, subject to the preferred 140-pixel limit.

The main area expands into the remaining width. This pattern works well for navigation panels, settings pages, and reference layouts.

Responsive Layouts

The fit-content() function can be combined with flexible tracks and media queries to create responsive layouts.

For example:

.responsive-grid {
  display: grid;
  grid-template-columns: fit-content(180px) minmax(0, 1fr);
  gap: 15px;
}
@media (max-width: 500px) {
  .responsive-grid {
    grid-template-columns: 1fr;
  }
}

On wider screens, the first column uses content-based sizing while the second expands.

On screens 500 pixels wide or narrower, the layout changes to a single column.

The function itself does not automatically change the number of grid columns.

Use media queries, container queries, or other responsive layout techniques when the column arrangement needs to change.

Common Uses

The fit-content() function is useful when a grid track should follow its content without growing unnecessarily large.

For example:

.form-grid {
  display: grid;
  grid-template-columns: fit-content(160px) minmax(0, 1fr);
  gap: 12px;
}

This allows the label column to remain compact while the input column receives the remaining space.

Limitations

The fit-content() function has several important rules and limitations.

• It requires exactly one length or percentage argument.
• Negative track size limits are invalid.
• The specified limit is not an absolute maximum when automatic minimum size constraints require more space.
• Long unbreakable content can force a grid track to exceed its preferred limit.
• Percentage limits depend on the applicable container size.
• The function does not automatically change the number of grid columns.
• It is different from the fit-content keyword.
• Support for using the function with element sizing properties may differ from support for CSS Grid track sizing.

For example, this is valid:

grid-template-columns: fit-content(200px) 1fr;

The following is invalid because no argument is supplied:

grid-template-columns: fit-content() 1fr;

The following is invalid because the limit is negative:

grid-template-columns: fit-content(-100px) 1fr;

When a track must remain within a strict width, additional constraints on its grid items may be necessary.

Browser Support

The CSS fit-content() function is widely supported for CSS Grid track sizing in modern browsers, including Chrome, Edge, Firefox, and Safari.

It can be used with established grid track sizing properties such as grid-template-columns, grid-template-rows, grid-auto-columns, and grid-auto-rows.

Support for the newer use of fit-content() with element sizing properties such as width and height is separate and may be more limited.

For example:

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

For current compatibility information, visit Can I Use? and search for CSS Grid fit-content().

Specifications

The fit-content() function for grid track sizing is defined in the CSS Grid Layout Module Level 2 .

The specification defines how the function combines an automatic minimum size, a content-based maximum, and a specified track size limit.

The newer element sizing form is also defined in the CSS Box Sizing Module Level 4 .

Related CSS features include minmax(), min-content, max-content, auto, and flexible fr track sizing.