Les mises en page macro décrivent l'organisation globale de votre interface à l'échelle de la page.
Avant d'appliquer une mise en page, vous devez vous assurer que le flux de votre contenu a du sens. C'est cette disposition par défaut en une seule colonne qui s'affichera sur les écrans plus petits.
<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 d'ensemble 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 ci-dessus, imaginons que vous souhaitiez une mise en page en deux colonnes lorsque la largeur de l'écran est suffisante. Pour appliquer cette mise en page en deux colonnes une fois que le navigateur est assez large, Utiliser 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ésentent comme suit :
@media (min-width: 45em) {
main {
display: flex;
flex-direction: row;
}
main article {
flex: 2;
}
main aside {
flex: 1;
}
}
Cependant, la version Flexbox nécessite davantage de code CSS. Chaque colonne dispose d'une règle distincte pour décrire 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 contenant.
Avez-vous besoin d'une requête multimédia ?
Vous n'aurez pas toujours besoin d'utiliser une requête multimédia. Les requêtes média fonctionnent très bien lorsque vous appliquez des modifications à quelques éléments, mais si la mise en page doit être régulièrement mise à jour, vos requêtes média peuvent devenir incontrôlables et générer de nombreux points d'arrêt.
Imaginons que vous ayez une page remplie de composants de carte.
Les fiches ne sont jamais plus larges que 15em, et vous souhaitez en placer autant que possible sur une ligne.
Vous pouvez écrire des requêtes multimédias avec des points d'arrêt 30em, 45em, 60em, etc., mais cela est assez fastidieux et difficile à gérer.
Vous pouvez plutôt appliquer des règles afin 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 fiches pour remplir la dernière ligne, les cartes restantes seront étirées pour occuper l'espace disponible au lieu de s'aligner en colonnes. Si vous souhaitez aligner des lignes et des colonnes, utilisez la 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 en grille, Il est possible de concevoir des mises en page de macro dynamiques avec un minimum de code CSS et sans requête média. Cela vous évite de faire des calculs : le navigateur s'en charge à la place. Pour voir des exemples de mises en page CSS modernes fluides sans requêtes multimédias, consultez 1linelayouts.com.
Testez vos connaissances
Testez vos connaissances sur les mises en page macro.
Quelle phrase décrit le mieux les mises en page macro ?
Les mises en page macro utilisent-elles toujours des requêtes multimédias pour s'adapter à différentes tailles d'écran ?
Maintenant que vous avez des idées pour des mises en page macro au niveau de la page, attirer votre attention sur les composants de la page. C’est le domaine de micromises en page.