Quand on pense aux mises en page, on pense souvent aux conceptions au niveau de la page. Toutefois, les composants plus petits de la page peuvent avoir leurs propres mises en page autonomes.
Idéalement, ces mises en page au niveau du composant s'ajustent automatiquement, quelle que soit leur position sur la page. Dans certains cas, vous ne savez pas si un composant sera placé dans la colonne de contenu principal, dans la barre latérale ou dans les deux. Si vous ne savez pas exactement où un composant va se retrouver, vous devez vous assurer qu'il peut s'adapter à son conteneur.
GRid
La grille CSS n'est pas réservée aux mises en page au niveau de la page. Il 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.
Le titre lui-même est un conteneur de grille.
Les éléments individuels sont disposés de manière à ce 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 la mise en page sous forme de grille dans les outils pour les développeurs Chrome.
Flexbox
Comme son nom l'indique, flexbox vous permet de 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'ajuster en conséquence.
Dans cet exemple, l'image occupe un quart de l'espace disponible et le texte occupe les trois autres quarts. Mais elle 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 des 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 et leur largeur) et laisser le navigateur déterminer la mise en œuvre finale.
Toutefois, le composant lui-même n'a pas connaissance 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 des composants plus délicates que les mises en page. Pour pouvoir appliquer des styles pertinents d'un point de vue contextuel, vos composants doivent en savoir plus sur 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 correspond à la fenêtre d'affichage du navigateur. Les requêtes média indiquent les dimensions du conteneur au niveau de la page.
Pour générer des rapports sur les dimensions d'un conteneur, utilisez des requêtes de conteneur.
Pour commencer, définissez les éléments qui serviront de conteneurs.
main,
aside {
container-type: inline-size;
}
Cela signifie que vous souhaitez pouvoir 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 d'une manière assez semblable aux 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 d'une taille inférieure à 25em, les styles Flexbox ne sont pas appliqués. L'image et le texte apparaissent dans l'ordre vertical.
Toutefois, si l'élément conteneur est plus large que 25em, l'image et le texte s'affichent côte à côte.
Les requêtes de conteneur vous permettent d'appliquer un style aux composants de manière indépendante. La largeur de la fenêtre d'affichage n'est plus importante. Vous pouvez écrire des règles en fonction de la largeur de l'élément conteneur.
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.
Ils 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 sous forme de 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 du conteneur pour les objets multimédias reste la même : n'appliquez une mise en page flexible horizontale que si l'élément conteneur est plus large que 25em.
Les requêtes de conteneur changent la donne pour les micromises en page. Vos composants peuvent être autonomes, indépendants de la fenêtre d'affichage du navigateur.
Testez vos connaissances
Testez vos connaissances sur les micro-mises en page.
La grille et le Flexbox sont tous deux utiles pour les micro-mises en page.
Précédemment, vous avez découvert les mises en page de macros au niveau de la page. Vous connaissez maintenant les micro-mises en page au niveau des composants. Nous allons maintenant examiner plus en détail les éléments constitutifs de votre contenu. Vous allez apprendre à rendre vos images responsives. Mais explorons maintenant la typographie responsive.