CSS fit-content() functie

Definitie en gebruik

CSS fit-content() De functie stelt het aanpassen van de grootte van het element op basis van de inhoud toe. Dit is vergelijkbaar met een element dat de beschikbare ruimte gebruikt, maar nooit groter dan de grootte van de inhoud.

voorbeeld

Gebruik fit-content() Passende grootte van de kolommen in het raster aanpassen:

#container {
  weergave: grid;
  grid-template-columns: fit-content(250px) fit-content(250px) auto;
  grid-gap: 7px;
  box-sizing: border-box;
  hoogte: 150px;
  breedte: 100%;
  achtergrondkleur: groen;
  padding: 7px;
}

Probeer het zelf uit

CSS syntaxis

fit-content(length|percentage)
Waarde Beschrijving
length Specificeer de absolute lengte van de grootte.
percentage Specificeer de percentagegrootte ten opzichte van de beschikbare ruimte.

Technische details

Versie: CSS4

Browserondersteuning

Tafelgetallen vertegenwoordigen de browserversie die de functie volledig ondersteunt.

Chrome Edge Firefox Safari Opera
57 16 52 10.1 44

Gerelateerde pagina's

Referentie:CSS grid-auto-kolommen eigenschap

Referentie:CSS grid-auto-rijen eigenschap

Referentie:CSS grid-template-columns eigenschap

Referentie:CSS grid-template-rows eigenschap