Рекомендуемый курс:

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

Определение и использование CSS fit-content() Функция позволяет изменять размер элемента в зависимости от содержимого. Этот метод подобен тому, что элемент использует доступное пространство, но никогда не превышает максимальный размер содержимого.

Пример

Использование fit-content() Изменить размер столбцов в сетке:

#container {
  display: grid;
  grid-template-columns: fit-content(250px) fit-content(250px) auto;
  grid-gap: 7px;
  box-sizing: border-box;
  height: 150px;
  width: 100%;
  background-color: green;
  padding: 7px;
}

Попробуйте сами

Грамматика CSS

fit-content(length|percentage)
Значение Описание
length Указать абсолютную длину大小的 значения.
percentage Указать размер в процентах по отношению к доступному пространству.

Технические детали

Версия: CSS4

Поддержка браузеров

Числа в таблице представляют собой версии браузеров, которые полностью поддерживают эту функцию.

Chrome Edge Firefox Safari Opera
57 16 52 10.1 44

Соответствующие страницы

См. также:CSS свойство grid-auto-columns

См. также:CSS свойство grid-auto-rows

См. также:Свойство CSS grid-template-columns

См. также:Свойство CSS grid-template-rows