fit-content()
=============

Baseline Widely available
-------------------------

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2020.

* Learn more
* See full compatibility
* Report feedback
The **`fit-content()`** CSS function clamps a given size to an available size according to the formula `min(maximum size, max(minimum size, argument))`.

Try it
------

The function can be used as a track size in CSS Grid properties, where the maximum size is defined by `max-content` and the minimum size by `auto`, which is calculated similar to `auto` (i.e., `minmax(auto, max-content)`), except that the track size is clamped at *argument* if it is greater than the `auto` minimum.

See the `grid-template-columns` page for more information on the `max-content` and `auto` keywords.

The `fit-content()` function can also be used as laid out box size for `width`, `height`, `min-width`, `min-height`, `max-width` and `max-height`, where the maximum and minimum sizes refer to the content size.

Syntax
------

The `fit-content()` function accepts a `<length>` or a `<percentage>` as an argument.


```css
/\* <length> values \*/
fit-content(200px)
fit-content(5cm)
fit-content(30vw)
fit-content(100ch)

/\* <percentage> value \*/
fit-content(40%)
```

### Values

`<length>`

An absolute length.

`<percentage>`

A percentage relative to the available space in the given axis.

In grid properties it is relative to the inline size of the grid container in column tracks and to the block size of the grid container for row tracks. Otherwise it is relative to the available inline size or block size of the laid out box depending on the writing mode.

Examples
--------

### Sizing grid columns with fit-content

#### HTML


```html
<div id="container">
  <div>Item as wide as the content.</div>
  <div>
    Item with more text in it. Because the contents of it are wider than the
    maximum width, it is clamped at 300 pixels.
  </div>
  <div>Flexible item</div>
</div>
```


#### CSS


```css
#container {
  display: grid;
  grid-template-columns: fit-content(300px) fit-content(300px) 1fr;
  grid-gap: 5px;
  box-sizing: border-box;
  height: 200px;
  width: 100%;
  background-color: #8cffa0;
  padding: 10px;
}

#container > div {
  background-color: #8ca0ff;
  padding: 5px;
}
```


#### Result

Specifications
--------------

| Specification |
| --- |
| CSS Box Sizing Module Level 4 # sizing-values |

Browser compatibility
---------------------

### css.properties.grid-template-columns.fit-content

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

### css.properties.width.fit-content\_function

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* Related sizing keywords: `min-content`, `max-content`
* Related CSS Grid properties: `grid-template`, `grid-template-rows`, `grid-template-columns`, `grid-template-areas`, `grid-auto-columns`, `grid-auto-rows`, `grid-auto-flow`
* Grid Layout Guide: *Line-based placement with CSS Grid*
* Grid Layout Guide: *Grid template areas - Grid definition shorthands*