The fit-content()
CSS function clamps a given size to an available size according to the formula min(maximum size, max(minimum size, argument))
.
The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
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.
The 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.
/* <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
<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
#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 | Status | Comment |
---|---|---|
CSS Box Sizing Module Level 3 The definition of 'fit-content()' in that specification. |
Working Draft | Defines the function as laid out box size for width , height , min-width , min-height , max-width and max-height . |
CSS Grid Layout The definition of 'fit-content()' in that specification. |
Candidate Recommendation | Defines the function when used as a track size. |
Browser compatibility
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
fit-content() | Chrome Full support 29 | Edge Full support 16 | Firefox Full support 51 | IE No support No | Opera Full support 44 | Safari Full support 10.1 | WebView Android Full support 57 | Chrome Android Full support 57 | Firefox Android Full support 51 | Opera Android Full support 43 | Safari iOS Full support 10.3 | Samsung Internet Android Full support 6.0 |
Legend
- Full support
- Full support
- No support
- No support
See also
- Related CSS 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