Función CSS fit-content()

Definición y uso

CSS fit-content() La función permite ajustar el tamaño del elemento según el contenido. Este método es similar a que el elemento utiliza el espacio disponible, pero nunca excederá el tamaño del contenido máximo.

Ejemplo

Usar fit-content() Ajustar el tamaño de las columnas de la rejilla:

#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: verde;
  padding: 7px;
}

Prueba personal

Sintaxis de CSS

fit-content(longitud|porcentaje)
Valor Descripción
longitud Especificar el valor de longitud absoluta del tamaño.
porcentaje Especificar el tamaño en porcentaje en relación con el espacio disponible.

Detalles técnicos

Versión: CSS4

Compatibilidad del navegador

Las cifras en la tabla representan la versión del navegador que admite completamente la función por primera vez.

Chrome Edge Firefox Safari Opera
57 16 52 10.1 44

Páginas relacionadas

Referencia:Atributo grid-auto-columns de CSS

Referencia:Atributo grid-auto-rows de CSS

Referencia:Atributo CSS grid-template-columns

Referencia:Atributo CSS grid-template-rows