Beaucoup de code de mise en page responsive devient plus complexe qu'il ne devrait l'être parce que les équipes forcent Flexbox à résoudre des problèmes pour lesquels Grid a été conçu.
Flexbox est excellent lorsque le problème est unidimensionnel : aligner des éléments dans une ligne, empiler le contenu dans une colonne, centrer un bloc, distribuer de l'espace sur une ligne. Cela devient plus délicat lorsque le problème est un vrai système de mise en page avec des lignes et des colonnes qui devraient se redimensionner de manière fluide ensemble.
C'est là que Grid se lit généralement mieux et supporte mieux les changements de design futurs.
Le Piège Commun de Flexbox
Le code commence souvent comme ceci :
.cards {
display: flex;
flex-wrap: wrap;
}
.card {
width: 33.33%;
}
@media (max-width: 1024px) {
.card {
width: 50%;
}
}
@media (max-width: 640px) {
.card {
width: 100%;
}
}
Cela fonctionne, mais cela transforme la mise en page en une comptabilité manuelle des points de rupture. Si vous ajoutez une barre latérale, augmentez la taille minimum des cartes, ou changez l'espacement, l'ensemble devient fragile.
Pourquoi Grid Aide
Grid vous permet d'exprimer la règle de mise en page réelle au lieu de gérer minutieusement les largeurs :
.cards {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
gap: 1rem;
}
Cela exprime quelque chose de plus proche de l’intention :
- chaque carte devrait faire au moins
18rem
- les cartes peuvent croître pour partager l'espace disponible
- ajustez autant de colonnes que cela a du sens
C'est une meilleure abstraction pour une mise en page de carte responsive.
Où Flexbox Gagne Encore
Grid n'est pas meilleur parce qu'il est plus récent. Il est meilleur lorsque la mise en page est bidimensionnelle.
Flexbox est toujours gagnant pour :
- barres de navigation
- groupes de boutons
- alignement du contenu à l'intérieur d'une carte
- mises en page d'outils et d'en-têtes
La bonne règle est :
- Grid pour l'échafaudage des pages et des sections
- Flexbox pour l'alignement local à l'intérieur des composants
Cette séparation rend le CSS plus facile à comprendre.
SEO et Angle Pratique UX
Un code de mise en page plus propre n'est pas seulement une préférence CSS. Cela tend à aider la maintenabilité, à réduire les bogues de mise en page à travers les tailles de viewport, et à faciliter la stabilité et la lisibilité du contenu sur les écrans plus petits. Cela aide indirectement les signaux de comportement des utilisateurs qui comptent pour la recherche et la conversion.
Le design responsive n'est pas seulement "bien sur mobile." C'est "le contenu atterrit toujours clairement sans que la mise en page ne lutte contre le contenu."
Lectures Complémentaires