Les mises en page macro décrivent l'organisation globale de l'interface, à l'échelle de la page.
Avant d'appliquer une mise en page, assurez-vous que le flux de votre contenu est logique. C'est l'ordre par défaut pour les petits écrans.
<body>
<header>…</header>
<main>
<article>…</article>
<aside>…</aside>
</main>
<footer>…</footer>
</body>
Lorsque vous organisez ces composants individuels au niveau de la page, vous concevez une mise en page macro, c'est-à-dire une vue globale de votre page. À l'aide de requêtes média, vous pouvez fournir des règles en CSS décrivant comment cette vue doit s'adapter à différentes tailles d'écran.
Grille
La grille CSS est un excellent outil pour appliquer une mise en page à votre page. Dans l'exemple précédent, imaginons que vous souhaitiez une mise en page sur deux colonnes lorsque la largeur de l'écran est suffisante. Pour appliquer cette mise en page à deux colonnes une fois que le navigateur est suffisamment large, utilisez une requête média pour définir les styles de grille au-dessus d'un point d'arrêt spécifié.
@media (min-width: 45em) {
main {
display: grid;
grid-template-columns: 2fr 1fr;
}
}
Flexbox
Pour cette mise en page spécifique, vous pouvez également utiliser flexbox. Les styles se présenteraient comme suit :
@media (min-width: 45em) {
main {
display: flex;
flex-direction: row;
}
main article {
flex: 2;
}
main aside {
flex: 1;
}
}
Toutefois, la version Flexbox nécessite plus de CSS. Chaque colonne possède une règle distincte qui décrit l'espace qu'elle doit occuper. Dans l'exemple de grille, ces mêmes informations sont encapsulées dans une règle pour l'élément conteneur.
Avez-vous besoin d'une requête média ?
Vous n'aurez pas toujours besoin d'utiliser une requête média. Les requêtes média fonctionnent bien lorsque vous appliquez des modifications à quelques éléments, mais si la mise en page doit être souvent mise à jour, vos requêtes média peuvent devenir incontrôlables avec de nombreux points d'arrêt.
Imaginons que vous ayez une page remplie de composants de carte.
Les cartes ne sont jamais plus larges que 15em, et vous souhaitez en placer le plus possible sur une même ligne.
Vous pouvez écrire des requêtes média avec des points d'arrêt tels que 30em, 45em et 60em, mais cela est assez fastidieux et difficile à gérer.
En revanche, vous pouvez appliquer des règles pour que les cartes elles-mêmes occupent automatiquement la bonne quantité d'espace.
.cards {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(15em, 1fr));
grid-gap: 1em;
}
Vous pouvez obtenir une mise en page similaire avec Flexbox. Dans ce cas, s'il n'y a pas assez de cartes pour remplir la dernière ligne, les cartes restantes s'étireront pour remplir l'espace disponible au lieu de s'aligner en colonnes. Si vous souhaitez aligner des lignes et des colonnes, utilisez une grille.
.cards {
display: flex;
flex-direction: row;
flex-wrap: wrap;
gap: 1em;
}
.cards .card {
flex-basis: 15em;
flex-grow: 1;
}
En appliquant des règles intelligentes dans Flexbox ou Grid, il est possible de concevoir des mises en page de macros dynamiques avec un minimum de CSS et sans aucune requête média. Cela vous évite de faire le travail vous-même, car c'est le navigateur qui effectue les calculs. Pour voir des exemples de mises en page CSS modernes qui sont fluides sans nécessiter de requêtes média, consultez 1linelayouts.com.
Vérifiez vos connaissances
Testez vos connaissances sur les mises en page macro.
Quelle phrase décrit le mieux les mises en page de macros ?
Les mises en page macro utilisent-elles toujours des requêtes média pour s'adapter aux différentes tailles d'écran ?
Maintenant que vous avez quelques idées de mises en page macro, concentrez-vous sur les composants de la page. C'est le domaine des micros mises en page.