Funzione CSS fit-content()

Definizione e uso

CSS fit-content() La funzione permette di adattare la dimensione dell'elemento in base al contenuto. Questo metodo è simile a quando l'elemento utilizza lo spazio disponibile, ma mai superiore alla dimensione massima del contenuto.

Esempio

Usa fit-content() Modifica la dimensione delle colonne della griglia:

#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 te stesso

Sintassi CSS

fit-content(length|percentage)
Valore Descrizione
length Specificare il valore della lunghezza assoluta della dimensione.
percentage Specificare la dimensione in percentuale rispetto allo spazio disponibile.

Dettagli tecnici

Versione: CSS4

Supporto del browser

Tabella delle cifre indica la versione del browser che supporta completamente la funzione.

Chrome Edge Firefox Safari Opera
57 16 52 10.1 44

Pagine correlate

Riferimento:Proprietà grid-auto-columns CSS

Riferimento:Proprietà grid-auto-rows CSS

Riferimento:Proprietà CSS grid-template-columns

Riferimento:Proprietà CSS grid-template-rows