Container queries en CSS

Estilizar un componente según el espacio que recibe, no según el viewport.

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

.card {
  display: grid;
  gap: 0.75rem;
}

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

Cómo funciona

1. container-type: inline-size vuelve consultable a un elemento.
2. @container pregunta entonces por el ancho de ese elemento.
3. La misma tarjeta puede ser angosta en una barra lateral y ancha en main.

Palabras clave y builtins usados aquí

• container
• display
• gap
• grid
• rem

El intento, en números

Líneas

16

Caracteres a escribir

206

Tokens

53

Ritmo de tres estrellas

85 tpm

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

Escribe este fragmento

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

← Anterior Siguiente →