This is an experimental technology
Because this technology's specification has not stabilized, check the compatibility table for usage in various browsers. Also note that the syntax and behavior of an experimental technology is subject to change in future versions of browsers as the specification changes.
The fit-content() CSS function represents the formula min(max-content, max(auto, argument)), 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.
Syntax
/* <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 inline size of the grid container.
Formal syntax
fit-content( [ <length> | <percentage> ] )
Example
CSS content
#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;
}
HTML content
<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>
Result
Specifications
| Specification | Status | Comment |
|---|---|---|
| CSS Grid Layout The definition of 'fit-content()' in that specification. |
Working Draft | Initial definition |
Browser compatibility
| Feature | Chrome | Edge | Firefox (Gecko) | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|---|
| Basic support | No support[1] | No support | No support[2] | No support[3] | No support[1] | ? |
| Feature | Android | Firefox Mobile (Gecko) | IE Phone | Opera Mobile | Safari Mobile |
|---|---|---|---|---|---|
| Basic support | No support[1] | No support[2] | No support | No support | No support |
[1] Implemented behind the experimental Web Platform features flag in chrome://flags since Chrome 29.0 and Opera 28.0.
[2] Implemented behind the preference layout.css.grid.enabled, defaulting to false since Gecko 51.0 (Firefox 51.0 / Thunderbird 51.0 / SeaMonkey 2.48).