Dimensionar según el contenido en CSS

Tres palabras clave que le preguntan al contenido qué ancho quiere tener.

.tag { inline-size: max-content; padding-inline: 0.6em; }

.label-column {
  inline-size: min-content;
  overflow-wrap: break-word;
}

.drawer {
  inline-size: fit-content;
  max-inline-size: 24rem;
  min-inline-size: 12rem;
}

.split {
  display: grid;
  grid-template-columns: fit-content(20rem) 1fr;
  gap: 1.5rem;
}

Cómo funciona

1. min-content es la palabra indivisible más ancha.
2. max-content es todo en una sola línea, mida lo que mida.
3. fit-content se ajusta al contenido entre esos dos límites.
4. El funcional fit-content(20rem) es un tamaño de track de grid, no un ancho.

Palabras clave y builtins usados aquí

• display
• em
• gap
• grid
• rem

El intento, en números

Líneas

18

Caracteres a escribir

303

Tokens

66

Ritmo de tres estrellas

85 tpm

Al ritmo de tres estrellas de 85 tokens por minuto, este intento toma unos 47 segundos.

Escribe este fragmento

Paso 1 de 3 en Dimensionado; paso 14 de 24 en Flexbox y grid.

← Anterior Siguiente →