Aquí hay algunos nerdery CSS de profundidad profunda de PPK. Si puedes envolver tu mente min-content (el elemento más pequeño puede basarse en el contenido que contiene) y max-content (el mayor contenido de un elemento puede empujarlo), entonces es solo un pequeño paso más para comprender fit-content. Como dice PPK, es una abreviatura de:
.box {
width: fit-content;
/* ... is the same as ... */
width: auto;
min-width: min-content;
max-width: max-content;
}Lo que significa que el elemento podrá cambiar de tamaño entre el mínimo y el máximo.
Mi cerebro siempre piensa en la situación de la interfaz de usuario solo ligeramente complicada de centrar una navegación horizontal que necesita su propio fondo por alguna razón. min-content no funciona ya que lo rompe todo demasiado estrecho. max-content no funciona porque entonces no permite envolver. Entonces fit-content es la papilla de osito bebé.
El artículo de PPK tiene muchos más detalles sobre las peculiaridades del navegador e incluye figuras interactivas realmente efectivas, así que definitivamente léelo, especialmente si te apetece tener un conocimiento profundo de CSS, ya que se vuelve humilde cuando comienzas a meterte en el fit-content() función en CSS Grid. Como 1fr fit-content(200px) 1fr jugar en una plantilla?
1fr min(min(max-content, available-size), max(min-content, 200px)) 1frNota: “donde available-size es el ancho disponible en la cuadrícula “. ¡Uf!
Enlace directo →