Flexbox vs Grid - Comment créer les mises en page HTML les plus courantes

Il y a tellement de bonnes ressources CSS partout sur Internet. Mais que faire si vous voulez juste une mise en page simple et que vous la voulez MAINTENANT?

Dans cet article, je décris les 5 mises en page Web les plus courantes et comment les créer à l'aide de Flexbox et de Grid.

Comment cela fonctionnera

Il y a un lien sous chaque mise en page pour le code HTML et CSS complet sur CodePen.

Notez que j'utilise SASS pour composer des définitions de style, donc si vous voulez faire de même sur votre local, installez SASS en utilisant:

npm i sass -g 

Modèle de carte de base

J'ai utilisé la carte ci-dessus comme base de la mise en page de la page Web. Il est composé de trois éléments dans une direction verticale, donc des divblocs normaux fonctionneraient bien. Cependant, j'aurai plus tard besoin d'étirer l'élément du milieu - le paragraphe de texte.

Ici, Flexbox et Grid font le travail de manière transparente. Je préfère Flexbox car c'est plus simple pour moi.

Gagnant: Flexbox

Boîte flexible CodePen, grille CodePen

Commençons maintenant à créer nos différentes mises en page.

# 1 Carte centrée verticalement et horizontalement

Avec Flexbox, nous avons besoin d'un élément centré horizontalement et d'un autre (l'élément enfant) centré verticalement.

L'ordre des éléments est défini par flex-direction. La façon dont l'élément se positionne dans l'espace disponible est définie par align-selfsur l'élément ou align-itemssur son parent.

Avec Grid, nous avons besoin de trois colonnes et trois lignes. Ensuite, nous positionnons la carte dans la cellule du milieu.

Le centrage horizontal est facile. Nous définissons trois colonnes et leurs tailles en utilisant grid-template-columns: auto 33% autocomme la carte doit être aussi large que 1/3 de la zone visible.

Le problème est que nous ne connaissons pas les dimensions verticales. Nous voulons que les lignes du haut et du bas occupent l'espace restant, ce qui n'est pas possible avec la grille. La carte est centrée, mais sa hauteur dépend de la hauteur de la fenêtre.

Cependant, nous pouvons résoudre ce problème avec un élément d'emballage supplémentaire autour de la carte et le centrer à l'aide de margin.

Gagnant: Flexbox

Boîte flexible CodePen, grille CodePen

# 2 Deux cartes centrées verticalement et horizontalement

Souvent, nous devons centrer plus d'un seul élément. Ces deux cartes doivent également conserver la même hauteur si l'une ou l'autre contient du texte plus long.

Avec Flexbox, nous devons envelopper les deux cartes dans un autre élément et l'utiliser pour centrer les deux cartes à la fois.

Nous ne pouvons pas utiliser align-itemsici car cela s'applique à l'axe Y dans ce cas. Nous devons définir comment l'espace restant sur l'axe X doit être distribué justify-content: center. Cela garantit que les deux cartes sont centrées horizontalement.

Si nous omettons le problème de hauteur variable de Grid, nous pouvons obtenir le même résultat même sans éléments d'emballage supplémentaires. Cette fois, nous définissons une grille avec cinq colonnes avec grid-template-columns: auto 33% 50px 33% auto. Le reste reste le même que dans l'exemple précédent.

Gagnant: Flexbox

Boîte flexible CodePen, grille CodePen

# 3 Plusieurs cartes de même largeur et hauteur

Il s'agit d'un autre cas d'utilisation typique pour les blogs, les sites de commerce électronique ou généralement tout site qui affiche une sorte de liste. Nous voulons que les cartes aient la même largeur et hauteur. La hauteur doit être déduite du plus grand élément de la liste.

Cela peut être fait dans Flexboxen utilisant flex-wrap: wrap. Les éléments s'enrouleront sur la ligne suivante si leur largeur dépasse l'espace restant de chaque ligne. Cependant, la même hauteur n'est conservée que dans la portée d'une seule ligne, sauf si vous la définissez explicitement.

la grillemontre sa vraie puissance ici. Cette disposition peut être créée en utilisant grid-auto-rows: 1frqui applique la même hauteur sur toutes les lignes.

Gagnant: Grid

Boîte flexible CodePen, grille CodePen

# 4 Alternance de texte et d'images centrées verticalement et horizontalement

Dans cet exemple, nous avons un texte avec des boutons CTA accompagné d'une image de l'autre côté. Les deux composants doivent être centrés verticalement, car leur taille peut varier.

C'est un jeu d'enfant pour Flexbox. Chaque ligne est un articleélément divisé en deux conteneurs d'emballage, .imget .content. Ils sont nécessaires pour une distribution de taille uniforme ( flex-basis: 50%).

Le centrage vertical du contenu interne est défini par align-items: center.

L'alternance est obtenue en inversant le sens de Flexbox flex-direction: row-reversesur chaque article impaire.

la grillegère aussi bien ce cas d'utilisation. Nous n'avons pas besoin de définir une grille géante, mais plutôt une pour chacune article.

Il définit des colonnes de largeur égale centrées verticalement à l'aide de align-items: center.

L'alternance est définie au niveau de la cellule par des valeurs commutées pour grid-column.

Gagnant: égalité

Boîte flexible CodePen, grille CodePen

# 5 En-tête horizontal avec menu

Pour réaliser cette conception en utilisant Flexbox, les deux côtés de l'en-tête doivent être représentés par un seul élément.

Le logo et le nom de l'entreprise en forment un anchorsur la gauche et le menu est un navélément unique sur la droite. Flexbox les positionne avec justify-content: space-between.

Avec Grid, nous avons besoin de deux colonnes - une pour le logo et l'autre pour le menu. Le menu est une autre grille qui répartit uniformément la taille des colonnes en utilisant grid-template-columns: repeat(4, minmax(0, 1fr)).

Le problème ici est que si nous voulons ajouter un autre élément au menu, nous devons également ajuster le CSS.

Gagnant: Flexbox

Boîte flexible CodePen, grille CodePen

Et le gagnant est...

Le score final est de 5: 2 en faveur de Flexbox, mais cela ne signifie pas qu'il devienne le gagnant ultime du CSS. Il y a des situations où vous devez utiliser l'un ou l'autre, parfois même les deux ensemble, pour réaliser ce dont vous avez besoin.

Si vous avez besoin d'un positionnement flexible et conditionnel, utilisez Flexbox. Si vous souhaitez créer des listes ou des structures similaires qui nécessitent des éléments de taille égale ou qui ont une forme de tableau, utilisez Grid.

En tant que développeur front-end, vous ne vous en tirerez pas sans connaître les deux.

Guide de référence Flexbox, Guide de référence Grid

PS Si j'ai manqué une mise en page que vous utilisez quotidiennement, faites-le moi savoir sur Twitter et je préparerai une suite :-)