Справочник HTML & CSS

fit-content()

Дорожка сетки по ширине содержимого, но не шире предела.

Синтаксис

fit-content(limit)

Параметры

Параметр	Тип	Описание
limit	length	Максимальный размер: `200px`, `30%`.

Примеры

Первая колонка подстраивается под текст до 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>

Примечания

Не путайте с ключевым словом fit-content без скобок, которое можно использовать в width и height.

См. также

minmax() — Размер дорожки сетки между минимумом и максимумом.
width — Ширина элемента.
grid-template-columns — Количество и ширина колонок сетки.

В учебнике

Grid — Сетка CSS Grid — колонки и строки, единица fr, функции repeat и minmax, промежутки и адаптивная сетка без медиазапросов.

Спасибо, что читаете!