CSS — Requêtes de conteneur

Dans une même fenêtre, une carte peut occuper une colonne latérale étroite ou une grande zone principale. Adaptez sa disposition à la taille d’un conteneur ancêtre grâce aux requêtes de conteneur.

Une même fenêtre peut contenir une colonne latérale étroite et une zone principale large. Avec une requête de taille, la carte s’adapte à la dimension en ligne de son conteneur ancêtre, généralement sa largeur dans un mode d’écriture horizontal. Définissez le conteneur sur cet ancêtre, puis modifiez ses descendants lorsqu’il dispose d’assez de place.

Définir le conteneur et écrire @container

container-type: inline-size permet d’interroger la dimension en ligne de l’élément. Le raccourci container peut aussi lui donner un nom. Ce nom aide à viser le bon ancêtre lorsque plusieurs conteneurs admissibles sont imbriqués.

.catalog { container: lessons / inline-size; }
.card { display: grid; gap: 1rem; }
@container lessons (min-width: 35rem) {
  .card { grid-template-columns: 10rem minmax(0, 1fr); }
}

La même carte dans deux espaces différents

Placez le même composant dans une colonne latérale et dans la zone principale. Seule la carte dont le conteneur est assez large doit passer à deux colonnes. Une unique condition sur la largeur de la fenêtre ne décrit pas cette différence d’espace local. La leçon CSS Grid explique ensuite le dimensionnement des pistes à l’intérieur de chaque disposition.