{{CSSRef}}{{SeeCompatTable}}
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
{{csssyntax}}
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
{{EmbedLiveSample("Example", "100%", 200)}}
Specifications
Specification | Status | Comment |
---|---|---|
{{SpecName("CSS Grid", "#valdef-grid-template-columns-fit-content", "fit-content()")}} | {{Spec2("CSS Grid")}} | Initial definition |
Browser compatibility
{{CompatibilityTable}}
Feature | Chrome | Edge | Firefox (Gecko) | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|---|
Basic support | {{CompatNo}}[1] | {{CompatNo}} | {{CompatNo}}[2] | {{CompatNo}}[3] | {{CompatNo}}[1] | {{CompatUnknown}} |
Feature | Android | Firefox Mobile (Gecko) | IE Phone | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|
Basic support | {{CompatNo}}[1] | {{CompatNo}}[2] | {{CompatNo}} | {{CompatNo}} | {{CompatNo}} |
[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 {{geckoRelease(51.0)}}.