Texto en varias columnas en CSS

Columnas de periódico, donde el navegador hace el balance.

.notes {
  columns: 3 18rem;
  column-gap: 2rem;
  column-rule: 1px solid #e5e7eb;
  column-fill: balance;
}

.notes h2 {
  column-span: all;
  margin-block: 1.5rem 0.5rem;
}

.notes .card {
  break-inside: avoid;
  margin-block-end: 1rem;
}

Cómo funciona

1. columns es la forma abreviada de un conteo y un ancho ideal.
2. column-fill: balance empareja las columnas; el defecto es llenar.
3. break-inside: avoid evita que una tarjeta se parta entre columnas.

Palabras clave y builtins usados aquí

• columns
• px
• rem

El intento, en números

Líneas

16

Caracteres a escribir

225

Tokens

57

Ritmo de tres estrellas

85 tpm

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

Escribe este fragmento

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

← Anterior Siguiente →