Les mises en page des macros décrivent l'organisation plus large de votre interface sur la page.
Avant d'appliquer une mise en page, assurez-vous que le flux de votre contenu est logique. Cet ordre par défaut à colonne unique correspond à ce qu'obtiendront les écrans plus petits.
<body>
<header>…</header>
<main>
<article>…</article>
<aside>…</aside>
</main>
<footer>…</footer>
</body>
Lorsque vous organisez ces composants au niveau de la page, vous concevez une mise en page de type 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 qui décrivent 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, supposons que vous souhaitiez une mise en page à deux colonnes, une fois que la largeur d'écran disponible 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 la 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. Ces 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 CSS. Chaque colonne est associée à une règle distincte qui indique 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'avez pas toujours besoin d'utiliser une requête média. Les requêtes média fonctionnent bien lorsque vous apportez des modifications à quelques éléments. Toutefois, si vous devez souvent mettre à jour la mise en page, elles risquent de devenir incontrôlables avec de nombreux points d'arrêt.
Imaginons que vous ayez une page
pleine d'éléments de fiche.
Les fiches ne sont jamais plus larges que 15em, et vous devez placer autant de cartes que vous le souhaitez sur une même ligne.
Vous pouvez écrire des requêtes média avec des points d'arrêt de 30em, 45em, 60em, etc., mais c'est assez fastidieux et difficile à gérer.
À la place, vous pouvez appliquer des règles de sorte que les cartes 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 fiches restantes s'étirent pour occuper l'espace disponible au lieu de s'aligner en colonnes. Si vous souhaitez aligner les lignes et les 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 grille, il est possible de concevoir des mises en page de macro dynamiques avec un code CSS minimal et sans aucune requête média. Cela représente moins d'efforts pour vous, car vous demandez au navigateur d'effectuer les calculs à la place. Pour voir des exemples de mises en page CSS modernes fluides sans nécessiter de requêtes média, consultez 1linelayouts.com.
Testez vos connaissances
Testez vos connaissances sur les mises en page de macros.
Quelle phrase décrit le mieux les mises en page de macros ?
Les mises en page macro utilisent toujours des requêtes média pour s'adapter à différentes tailles d'écran ?
Maintenant que vous avez quelques idées de mise en page des macros au niveau de la page, portez votre attention sur les composants de la page. Il s'agit du domaine des micromises en page.