fit-content()
A grid track as wide as its content, but not wider than the limit.
Syntax
fit-content(limit)Parameters
| Parameter | Type | Description |
|---|---|---|
| limit | length | The maximum size: `200px`, `30%`. |
Examples
The first column fits its text up to 150px:
<style>
.grid { display: grid; grid-template-columns: fit-content(150px) 1fr; gap: 6px; }
.grid div { padding: 8px; background: lavender; }
</style>
<div class="grid"><div>Short</div><div>The rest</div></div>
<p></p>
<div class="grid"><div>A much longer label that hits the limit</div><div>The rest</div></div>Notes
Do not confuse it with the keyword fit-content without brackets, which can be used in width and height.
See also
- minmax() — A grid track size between a minimum and a maximum.
- width — The width of an element.
- grid-template-columns — The number and widths of the columns of a grid.
In the tutorial
- Grid — CSS Grid — columns and rows, the fr unit, the repeat and minmax functions, gaps and a responsive grid without media queries.