CSS fit-content() funktio

Määrittely ja käyttö

CSS: fit-content() Funktiota annetaan muuttaa elementin kokoa sisällön mukaan. Tämä tapa on samanlainen kuin elementti käyttää saatavilla olevaa tilaa, mutta ei koskaan ylitä suurinta sisältökokoa.

Esimerkki

Käytä fit-content() Muuta ruudukkoon sarakkeiden kokoa:

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

Kokeile itse

CSS syntaksi

fit-content(length|percentage)
Arvo Kuvaus
length Määritä kokonaisen kokoonpanon absoluuttinen pituusarvo.
percentage Määritä suhteellinen kokoonpanon prosenttikohta.

Tekninen tarkistus

Versio: CSS4

Selaimen tuki

Taulukon numerot ilmaisevat ensimmäisen selaimen version, joka tukee tätä toimintoa täysin.

Chrome Edge Firefox Safari Opera
57 16 52 10.1 44

Tiedot sivusta

Viittaus:CSS ruudukko-itsenäiset-sarakkeet ominaisuus

Viittaus:CSS ruudukko-itsenäiset-rivit ominaisuus

Viittaus:CSS grid-template-columns ominaisuus

Viittaus:CSS grid-template-rows ominaisuus