Il n’y a pas si longtemps, la mise en page de toutes les pages HTML se faisait via des tables, des flotteurs et d’autres propriétés CSS qui n’étaient pas adaptées au styl et conception des pages Web complexes. Vient ensuite FlexBox: un mode de mise en page spécialement conçu pour créer des pages responsives robustes. FlexBox a facilité l’alignement correct des éléments et leur contenu, et est maintenant le système CSS préféré de la plupart des développeurs web. Maintenant, nous avons un tout nouveau considéré comme le meilleur des systèm de création des mises pages html. C’est le puissant CSS Grid.
Table Des Matières
Tester Une Disposition Basique
Pour avoir une idée de ce que c’est construire des mises en page avec chaque système, nous avons construit la même page HTML deux fois, une fois avec Flexbox et une autre fois avec la grille CSS. Vous pouvez télécharger les deux projets à partir du bouton Télécharger en haut de l’article, ou les inspecter dans cette démo en ligne:
Le design est assez basique: il se compose d’un conteneur central, à l’intérieur duquel nous avons un en-tête header, une section principale main section, une barre latérale sidebar et un pied de page footer. Voici les principaux «défis» que nous devrons résoudre, tout en maintenant CSS et HTML aussi propre que possible:
- Placez les quatre grandes sections de la mise en page.
- Rendre la page responsive (la barre latérale se trouve en dessous du contenu principal sur les écrans plus petits).
- Alignez le contenu de l’en-tête – navigation vers la gauche, bouton vers la droite.
Comme vous pouvez le constater, et dans l’intérêt de la comparaison, nous avons gardé tout très simple. Commençons par le problème numéro un.
Défi 1: positionner les sections de la page
La Solution FlexBox
.container {
display: flex;
flex-direction: column;
}Maintenant, nous devons faire en sorte que la section principale et la barre latérale se tiennent à côté. Puisque les conteneurs flex sont généralement unidirectionnels, nous devrons ajouter un élément wrapper (enveloppe).
<header></header>
<div class="main-and-sidebar-wrapper">
<section class="main"></section>
<aside class="sidebar"></aside>
</div>
<footer></footer>Nous créons ensuite l’enveloppe wrapper display:flex et flex-direction dans la direction opposée.
.main-and-sidebar-wrapper {
display: flex;
flex-direction: row;
}La dernière étape consiste à définir la taille de la section principale et de la barre latérale. Nous voulons que la taille du contenu principal soit trois fois supérieure à celle de la barre latérale, ce qui est facile à faire avec flex ou percentage (pourcentage).
.main {
flex: 3;
margin-right: 60px;
}
.sidebar {
flex: 1;
}Comme vous pouvez le voir, FlexBox a fait un bon travail, mais nous avons encore besoin de beaucoup de propriétés CSS + un élément HTML supplémentaire. Voyons ce que CSS Grid fera!
La Solution CSS Grid
Il y a quelques différentes façons d’utiliser la grille CSS CSS Grid, Mais nous irons avec la syntaxe grid-template-areas, du moment qu’elle semble la mieux adaptée à ce que nous essayerons d’accomplir.
D’abord, nous définirons quatre grid-area (zones de grille), une pour chaque section de page:
<header></header>
<!-- Remarquez qu'il n'y a pas de wrapper cette fois -->
<section class="main"></section>
<aside class="sidebar"></aside>
<footer></footer>
header {
grid-area: header;
}
.main {
grid-area: main;
}
.sidebar {
grid-area: sidebar;
}
footer {
grid-area: footer;
}Ensuite, nous pouvons configurer notre grille et assigner le placement de chaque zone. Le code ci-dessous peut sembler assez compliqué au début, mais une fois que vous connaissez le système de grille, ça va devenir très facile à saisir.
.container {
display: grid;
/* Definie la taille et le nombre de colonnes dans notre grille.
L'unité fr fonctionne comme flex:
Fr colonnes partageront l'espace libre dans la ligne selon leur valeur
grid-template-columns: 3fr 1fr;
/* Affectez les zones de grille que nous avons faites plus tôt à des endroits
spécifiques sur la grille.
La 1ère ligne est tout l'en-tête.
La 2ème ligne est partagée entre la section principale et
la barre latérale.
la dernière ligne est le pied de page. */
grid-template-areas:
"header header"
"main sidebar"
"footer footer";
/* Les gouttières entre chaque cellule de grille seront de 60 pixels. */
grid-gap: 60px;
}Et voilà! Notre mise en page va maintenant suivre la structure ci-dessus, et en raison de la façon dont nous l’avions configuré, nous n’avons même pas à faire face à des marges ou des remplissage.
Défi 2: rendre la page Responsive
La Solution Flexbox
L’exécution de cette étape est fortement liée à la précédente. Pour la solution Flexbox, nous devrons changer flex-direction de wrapper, et ajuster certaines marges.
@media (max-width: 600px) {
.main-and-sidebar-wrapper {
flex-direction: column;
}
.main {
margin-right: 0;
margin-bottom: 60px;
}
}Notre page est très simple, et donc il n’y a pas grand chose à refaire dans media query, mais dans une mise en page plus complexe, il y aura beaucoup de choses à redéfinir.
La Solution CSS Grid
Étant donné que nous avons déjà défini grid-areas, il suffit de les réorganiser dans media-query. Nous pouvons utiliser la même configuration de colonne.
@media (max-width: 600px) {
.container {
/* Réalignez les grid-area-s pour une mise en page mobile. */
grid-template-areas:
"header header"
"main main"
"sidebar sidebar"
"footer footer";
}
}Ou, nous pouvons redéfinir toute la mise en page à partir de zéro si nous pensons que c’est plus propre.
@media (max-width: 600px) {
.container {
/* Redefine the grid into a single column layout. */
grid-template-columns: 1fr;
grid-template-areas:
"header"
"main"
"sidebar"
"footer";
}
}Défi 3: Aligner les Composants de l’En-tête
La Solution Flexbox
Notre en-tête comprend des liens pour la navigation et un bouton. Nous voulons que la navigation soit à gauche et le bouton à droite. Les liens à l’intérieur du nav doivent être alignés correctement l’un à côté de l’autre.
<header>
<nav>
<li><a href="#"><h1>Logo</h1></a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</nav>
<button>Button</button>
</header>The technique is really simple
header {
display: flex;
justify-content: space-between;
}Maintenant, la liste de navigation et le bouton sont correctement alignés. Tout ce qui reste est de faire passer les objets à l’intérieur du <nav> horizontalement. C’est facilke d’utiliser display: inline-block içi, mais puisque nous allons en pleine FlexBox, appliquons une solution de type FlexBox uniquement:
header nav {
display: flex;
align-items: baseline;
}Seulement deux lignes! Pas mal du tout. Voyons comment CSS grid la gère.
La Solution CSS Grid
Pour diviser le nav et le bouton, nous devrons créer header (l’en-tête) display: grid et configurer une grille à 2 colonnes. Nous aurons également besoin de deux lignes supplémentaires de CSS pour les positionner aux bordures respectives.
header{
display: grid;
grid-template-columns: 1fr 1fr;
}
header nav {
justify-self: start;
}
header button {
justify-self: end;
}En ce qui concerne les liens à l’intérieur de la navigation, ça n’a pas été bien fait avec CSS grid. Voilà comment notre meilleur essai semble:
Les liens sont en ligne mais ils ne peuvent pas être correctement alignés, puisqu’il n’ya pas d’option baseline comme align-items dans FlexBox. Nous devrions également définir une autre sous-grille.
header nav {
display: grid;
grid-template-columns: auto 1fr 1fr;
align-items: end;
}Il est clair que la grille CSS a des difficultés avec cette partie de la mise en page, ce n’est pas trop surprenant si on sait que CSS Grisd met l’accent sur l’alignement des conteneurs, pas tellement sur le contenu dedans. ‘est just que CSS Grid semble ne pas être destinée à faire les finitions 🙂
Conclusion
Si vous avez poursuit l’ensemble de l’article (c’est un bon travail dans ce cas!), La conclusion ne devrait pas vous surprendre. La vérité est qu’il n’y a pas de meilleur système! à vrai dire, FlexBox et CSS Grid sont tous les deux bons à différentes choses et je vois qu’ils sont faits pour être utilisés ensembles et non comme une alternative l’un à l’autre.
Résumons la comparaison:
- CSS Grid est idéale pour construire l’image plus grande. il permet de gérer très facilement la disposition de la page entière et peut gérer plus de modèles peu orthodoxes et asymétriques.
- FlexBox quant à lui, est idéal pour aligner le contenu dans les éléments. Utilisez FlexBox pour positionner les petits détails de la conception.
- Utilisez CSS Grid pour les mises en page 2D (lignes et colonnes).
- FlexBox fonctionne mieux dans une seule dimension (lignes ou colonnes).
- Vous n’êtes pas obligé d’utiliser uniquement CSS Grid ou seulement FlexBox. Apprenez tous les deux et utilisez-les ensembles.
