calc y unidades en CSS

Mezclar unidades en una expresión y las unidades que conviene usar.

.pane {
  height: calc(100dvh - 3.5rem);
  padding-inline: calc(var(--pad, 1rem) / 2);
}

.prose {
  max-width: 68ch;
}

.grid {
  grid-template-columns: repeat(
    auto-fit, minmax(calc(50% - 0.5rem), 1fr)
  );
}

Cómo funciona

1. calc puede mezclar porcentajes con longitudes absolutas.
2. dvh sigue el viewport encogible de un navegador móvil.
3. ch y ex son relativas a la fuente, ideales para medidas de texto.

Palabras clave y builtins usados aquí

• calc
• ch
• height
• rem

El intento, en números

Líneas

14

Caracteres a escribir

200

Tokens

66

Ritmo de tres estrellas

75 tpm

Al ritmo de tres estrellas de 75 tokens por minuto, este intento toma unos 53 segundos.

Escribe este fragmento

Paso 2 de 3 en Valores y unidades; paso 21 de 26 en Selectores y el modelo de caja.

← Anterior Siguiente →