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. Cet ordre par défaut à une seule colonne correspond à ce que les petits écrans auront la possibilité d'obtenir.
<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 de haut niveau de votre page. À l'aide de requêtes média, vous pouvez définir des règles dans 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, disons que vous souhaitez une mise en page à deux colonnes une fois que la largeur d'é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 le 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;
}
}
Cependant, la version Flexbox nécessite davantage de code CSS. Chaque colonne comporte une règle distincte pour décrire l'espace qu'elle doit occuper. Dans l'exemple de grille, les mêmes informations sont encapsulées dans une règle pour l'élément parent.
Avez-vous besoin d'une requête média ?
Il n'est pas toujours nécessaire d'utiliser une requête mé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 d'éléments de carte.
Les cartes ne sont jamais plus larges que 15em, et vous voulez mettre autant de cartes que possible sur une même ligne.
Vous pouvez écrire des requêtes média avec des points d'arrêt 30em, 45em, 60em,
mais c'est assez fastidieux
et difficile à entretenir.
À la place, vous pouvez appliquer des règles pour que les fiches 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. Vous avez moins de travail à faire : c'est le navigateur qui effectue les calculs. Pour voir des exemples de mises en page CSS modernes et fluides sans nécessiter de requêtes média, consultez 1linelayouts.com
Testez vos connaissances
Testez vos connaissances sur les mises en page de macro.
Quelle phrase décrit le mieux les mises en page macro ?
Les mises en page macro utilisent toujours des requêtes média 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.