Функция CSS `fit-content()`

fit-content() CSS функция ограничивает заданный размер доступным размером согласно формуле min(maximum size, max(minimum size, argument)).

Она отличается от ключевого слова fit-content, которое не принимает аргументов и задаёт размер блока на основе его содержимого в пределах доступного пространства. Только fit-content() допустимо использовать в свойствах, задающих размеры дорожек сетки, например grid-template-columns.

Попробуйте

grid-template-columns: fit-content(8ch) fit-content(8ch) 1fr;

grid-template-columns: fit-content(100px) fit-content(100px) 1fr;

grid-template-columns: fit-content(40%) fit-content(40%) 1fr;

<section class="default-example" id="default-example">
  <div class="example-container">
    <div class="transition-all" id="example-element">
      <div>One. This column has more text in it.</div>
      <div>Two</div>
      <div>Three</div>
      <div>Four</div>
      <div>Five</div>
    </div>
  </div>
</section>

#example-element {
  border: 1px solid #c5c5c5;
  display: grid;
  grid-gap: 10px;
  width: 250px;
}

#example-element > div {
  background-color: rgb(0 0 255 / 0.2);
  border: 3px solid blue;
  text-align: left;
}

Эту функцию можно использовать в качестве размера дорожки в свойствах CSS Grid, где максимальный размер определяется с помощью max-content, а минимальный — с помощью auto, который вычисляется аналогично auto (то есть minmax(auto, max-content)), за исключением того, что размер дорожки ограничивается значением аргумента, если оно больше минимального значения auto.

Дополнительную информацию о ключевых словах max-content и auto см. на странице grid-template-columns.

Функцию fit-content() также можно использовать в качестве размера блока для свойств width, height, min-width, min-height, max-width и max-height, где максимальный и минимальный размеры относятся к размеру содержимого.

Синтаксис

/* <length> values */
fit-content(200px)
fit-content(5cm)
fit-content(30vw)
fit-content(100ch)

/* <percentage> value */
fit-content(40%)

Значения

<length>

Абсолютная длина.

<percentage>

Процент относительно доступного пространства по заданной оси.

В свойствах сетки значение относится к строчному размеру контейнера сетки для столбцов и к блочному размеру контейнера сетки для строк. В остальных случаях оно относится к доступному строчному или блочному размеру блока в зависимости от режима письма.

Формальный синтаксис

Примеры

Задание размеров столбцов сетки с помощью 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;
}

Результат

Спецификации

Совместимость с браузерами

См. также

• min-content ключевое слово
• max-content ключевое слово
• Задание размеров CSS-блоков: модуль
• grid-template
• grid-template-rows
• grid-template-columns
• grid-template-areas
• grid-auto-columns
• grid-auto-rows
• grid-auto-flow
• fit-content ключевое слово
• Размещение по линиям в CSS Grid
• Области шаблона сетки: сокращённые свойства для определения сетки