Micro-mises en page

Lorsque nous pensons aux mises en page, nous pensons souvent aux conceptions au niveau de la page. Toutefois, les composants plus petits d'une page peuvent avoir leurs propres mises en page autonomes.

Dans l'idéal, ces mises en page au niveau des composants s'ajustent automatiquement, quelle que soit leur position sur la page. Il peut arriver que vous ne sachiez pas si un composant sera placé dans la colonne de contenu principal, dans la barre latérale ou dans les deux. Sans savoir exactement où un composant finira par se trouver, vous devez vous assurer qu'il peut s'adapter à son conteneur.

Grille

La grille CSS ne sert pas uniquement aux mises en page. Cela fonctionne également bien pour les composants qui y sont intégrés.

Dans cet exemple, les pseudo-éléments ::before et ::after créent des lignes décoratives de chaque côté d'un titre. L'en-tête lui-même est un conteneur de grille. Les éléments individuels sont disposés de sorte que les lignes remplissent toujours l'espace disponible.

h1 {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 1em;
}
h1::before,
h1::after {
  content: "";
  border-top: 0.1em double black;
  align-self: center;
}

Découvrez comment inspecter les mises en page en grille dans les outils pour les développeurs Chrome.

Flexbox

Comme son nom l'indique, vous pouvez utiliser Flexbox pour rendre vos composants flexibles. Vous pouvez déclarer les éléments de votre composant qui doivent avoir une taille minimale ou maximale, et laisser les autres éléments s'adapter en conséquence.

Dans cet exemple, l'image occupe un quart de l'espace disponible et le texte les trois autres quarts. Mais l'image ne dépasse jamais 200 pixels.

.media {
  display: flex;
  align-items: center;
  gap: 1em;
}
.media-illustration {
  flex: 1;
  max-inline-size: 200px;
}
.media-content {
  flex: 3;
}

Découvrez comment inspecter les mises en page Flexbox dans les Outils pour les développeurs Chrome.

Requêtes de conteneur

Flexbox vous permet de concevoir à partir du contenu. Vous pouvez spécifier les paramètres de vos éléments (leur largeur minimale et maximale) et laisser le navigateur déterminer l'implémentation finale.

Mais le composant lui-même n'a aucune conscience de son contexte. Il ne sait pas s'il est utilisé dans le contenu principal ou dans une barre latérale. Cela peut rendre les mises en page de composants plus complexes que celles des pages. Pour pouvoir appliquer des styles contextuellement pertinents, vos composants doivent connaître plus que la taille de la fenêtre d'affichage dans laquelle ils se trouvent.

Avec les mises en page, vous connaissez la largeur du conteneur, car il s'agit de la fenêtre d'affichage du navigateur. Les requêtes média indiquent les dimensions du conteneur au niveau de la page.

Pour signaler les dimensions d'un conteneur, utilisez les requêtes de conteneur.

Pour commencer, définissez les éléments qui font office de conteneurs.

main,
aside {
  container-type: inline-size;
}

Cela signifie que vous souhaitez interroger la dimension intégrée. Pour les documents en anglais, il s'agit de l'axe horizontal. Vous allez modifier les styles en fonction de la largeur du conteneur.

Si un composant se trouve dans l'un de ces conteneurs, vous pouvez appliquer des styles de la même manière que vous appliquez des requêtes média.

.media-illustration {
  max-width: 200px;
  margin: auto;
}

@container (min-width: 25em) {
  .media {
    display: flex;
    align-items: center;
    gap: 1em;
  }

  .media-illustration {
    flex: 1;
  }

  .media-content {
    flex: 3;
  }
}

Si un objet multimédia se trouve dans un conteneur plus étroit que 25em, les styles Flexbox ne sont pas appliqués. L'image et le texte sont ordonnés verticalement.

Toutefois, si l'élément conteneur est plus large que 25em, l'image et le texte apparaissent côte à côte.

Les requêtes de conteneur vous permettent d'appliquer un style aux composants de manière indépendante. Vous pouvez écrire des règles basées sur la largeur de l'élément conteneur. La largeur de la fenêtre d'affichage n'a plus d'importance.

Combiner des requêtes

Vous pouvez utiliser des requêtes média pour la mise en page et des requêtes de conteneur pour les composants de la page.

Ici, la structure globale de la page comporte un élément main et un élément aside. Les deux éléments contiennent des objets multimédias.

<body>
  <main>
     <div class="media">…</div>
     <div class="media">…</div>
  </main>
  <aside>
     <div class="media">…</div>
  </aside>
</body>

Une requête média applique une mise en page en grille aux éléments main et aside lorsque la fenêtre d'affichage est plus large que 45em.

@media (min-width: 45em) {
  body {
    display: grid;
    grid-template-columns: 3fr 1fr;
  }
}

La règle de requête de conteneur pour les objets multimédias reste la même : n'appliquer une mise en page Flexbox horizontale que si l'élément conteneur est plus large que 25em.

Les requêtes de conteneur sont un atout précieux pour les micro-layouts. Vos composants peuvent être autonomes et indépendants de la fenêtre d'affichage du navigateur.

Vérifiez vos connaissances

Testez vos connaissances sur les micro-layouts.

Vous avez déjà découvert les mises en page de macros au niveau de la page. Vous connaissez maintenant les microlayouts au niveau des composants.

Ensuite, vous allez approfondir les éléments de base de votre contenu et apprendre à rendre vos images responsives. Vous allez d'abord découvrir la typographie responsives.