CSS fit-content() funktionen

Definition och användning

CSS fit-content() Funktionen tillåter att elementets storlek justeras baserat på innehållet. Detta sätt liknar att elementen använder tillgängligt utrymme, men aldrig överstiger den största innehållsstorleken.

Exempel

Använd fit-content() Justera storleken på kolonnen i nätverket:

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

Prova själv

CSS Syntax

fit-content(length|percentage)
Värde Beskrivning
length Specificerar storleken som ett absolut längdvärde.
percentage Specificerar storleken som en procentandel av tillgänglig utrymme.

Tekniska detaljer

Version: CSS4

Webbläsarstöd

Tabellens siffror anger den första webbläsarversion som fullständigt stöder denna funktion.

Chrome Edge Firefox Safari Opera
57 16 52 10.1 44

Relaterade sidor

Referens:CSS gridautomatiska kolumner egenskap

Referens:CSS gridautomatiska rader egenskap

Referens:CSS grid-template-columns egenskap

Referens:CSS grid-template-rows egenskap