Funkcja CSS fit-content()

Definicja i użycie

CSS fit-content() Funkcja pozwala na dostosowanie rozmiaru elementu na podstawie jego zawartości. Ten sposób jest podobny do tego, w którym element używa dostępnej przestrzeni, ale nigdy nie przekracza maksymalnego rozmiaru zawartości.

Przykład

Użyj fit-content() Dostosuj rozmiar kolumn w siatce:

#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;
}

Spróbuj sam

Gramatyka CSS

fit-content(length|percentage)
Wartość Opis
length Określ wartość absolutną długości rozmiaru.
percentage Określ rozmiar w procentach w stosunku do dostępnej przestrzeni.

Szczegóły techniczne

Wersja: CSS4

Wsparcie przeglądarki

Tabela zawiera liczby oznaczające wersje przeglądarek, które w pełni wspierają tę funkcję.

Chrome Edge Firefox Safari Opera
57 16 52 10.1 44

Strony związane

Odniesienie:Atrybut grid-auto-columns w CSS

Odniesienie:Atrybut grid-auto-rows w CSS

Odniesienie:Atrybut CSS grid-template-columns

Odniesienie:Atrybut CSS grid-template-rows