Fiche "Requête du conteneur"

Cette démonstration utilise des requêtes de conteneur pour créer une fiche responsive et intrinsèque. La fiche passe d'une mise en page à une seule colonne pour les tailles plus étroites à une mise en page en deux colonnes pour les tailles plus larges.

Pour créer le conteneur, commencez par définir le confinement sur le parent:

/* Set containment on parent */
.container {
  container-name: myContainer;
  container-type: inline-size;
  /* You can also use the shorthand property `container: myContainer / inline-size`.
}

Vous pouvez définir des styles de base:

.desc {
  display: none;
}

.card {
  text-align: center;
  padding: 0.5rem;
}

Mettez à jour ces styles de base en fonction de la largeur intégrée de ce conteneur parent:

/* 2-column grid layout at >=350px */
@container (min-width: 350px) {
  .card {
    display: grid;
    grid-template-columns: 40% 1fr;
    align-items: center;
    gap: 1rem;
    text-align: left;
  }
}

/* Display description at >=500px */
@container (min-width: 500px) {
  .desc {
    display: block;
  }
}

Cela signifie que si vous avez exactement le même composant dans différentes parties de votre interface utilisateur, il peut utiliser sa propre logique pour redimensionner et s'adapter au mieux à son conteneur. Vous bénéficiez d'un meilleur contrôle sur la mise en page de la fiche que si vous aviez uniquement la fenêtre d'affichage globale. L'exemple suivant illustre ce processus en plaçant la fiche de requête du conteneur dans une grille avec des largeurs de colonnes variables:

Découvrez cette démonstration sur Codepen

<div class="container">
  <div class="card">
    <div class="visual"></div>
    <div>
      <div class="meta">
        <h1>Card Title Here</h1>
        <h2 class="time">Subtitle</h2>
      </div>
        <p class="desc">Here is some descriptive text to support the main idea of the card. It will be hidden when there is less inline space.</p>
      <button>I'm a button</button>
    </div>
  </div>
</div>

        /* Set containment on parent */
.container {
  container: inline-size;
  width: 100%;
  max-width: 750px;
  margin: 0 auto;
}

/* Base Styles */
.visual {
  aspect-ratio: 1 / 1;
}

.desc {
  display: none;
}

.card {
  text-align: center;
  padding: 0.5rem;
}

/* Responsive styles */

/* 2-column grid layout at >=350px */
@container (min-width: 350px) {
  .card {
    display: grid;
    grid-template-columns: 40% 1fr;
    align-items: center;
    gap: 1rem;
    text-align: left;
  }
}

/* Display description at >=500px */
@container (min-width: 500px) {
  .desc {
    display: block;
  }
}