Grids responsivos sin media queries en CSS

auto-fit y minmax te dan un grid de tarjetas responsivo en una sola declaración.

.cards {
  display: grid;
  grid-template-columns: repeat(
    auto-fit, minmax(min(18rem, 100%), 1fr)
  );
  gap: 1rem;
}

.tiles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(6rem, 1fr));
  gap: 0.5rem;
}

Cómo funciona

1. auto-fit descarta los tracks vacíos; auto-fill los conserva.
2. minmax fija lo mínimo y lo máximo que puede medir un track.
3. min() evita que se desborde en un teléfono angosto.

Palabras clave y builtins usados aquí

• display
• gap
• grid
• rem

El intento, en números

Líneas

13

Caracteres a escribir

211

Tokens

66

Ritmo de tres estrellas

80 tpm

Al ritmo de tres estrellas de 80 tokens por minuto, este intento toma unos 50 segundos.

Escribe este fragmento

Paso 4 de 7 en Grid; paso 10 de 24 en Flexbox y grid.

← Anterior Siguiente →