contenido adecuado y contenido adecuado ()

Aquí hay algo de nerdery CSS profundo y profundo de PPK. Si puede comprender min-content(lo más pequeño que puede ser un elemento en función del contenido que contiene) y max-content(lo más grande que el contenido de un elemento puede impulsar), entonces es solo un pequeño paso más hacia la comprensión 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, ligeramente complicada, de centrar una navegación horizontal que necesita su propio fondo por alguna razón. min-contentNo funciona porque lo aplasta demasiado. max-contentno funciona porque entonces no permite envolver. También lo fit-contentes la papilla de osito.

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 crees que tienes un conocimiento profundo sobre CSS, ya que se vuelve humillante rápidamente cuando comienzas a ingresar a la fit-content()función en CSS Grid. ¿Cómo 1fr fit-content(200px) 1frse desarrolla en una plantilla?

1fr min(min(max-content, available-size), max(min-content, 200px)) 1fr

Nota: "¿dónde available-sizeestá el ancho disponible en la cuadrícula?" ¡Uf!