Preguntarle al contenedor en CSS

Un componente que se dimensiona según su hueco, no según la ventana donde le tocó estar.

.card-slot { container-type: inline-size; container-name: card; }

.card {
  display: grid;
  gap: 0.5rem;
  font-size: clamp(0.875rem, 3cqi, 1.125rem);
}

@container card (width >= 30rem) {
  .card {
    grid-template-columns: 10rem 1fr;
    align-items: start;
  }
}

@container card (width < 20rem) {
  .card .meta { display: none; }
}

Cómo funciona

1. container-type: inline-size deja que los hijos consulten el ancho.
2. container-name importa cuando los contenedores se anidan entre sí.
3. cqi es el uno por ciento del tamaño inline del contenedor, como un vw de caja.

Palabras clave y builtins usados aquí

• container
• display
• gap
• grid
• rem

El intento, en números

Líneas

18

Caracteres a escribir

318

Tokens

87

Ritmo de tres estrellas

85 tpm

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

Escribe este fragmento

Paso 4 de 4 en Responsivo; paso 4 de 21 en CSS responsivo y moderno.

← Anterior Siguiente →