Explorez les différences entre ces méthodes de mise en page CSS modernes avec un problème pratique: l'alignement des colonnes.
En ce qui concerne les mises en page CSS, les deux principaux outils à votre disposition sont Grid et Flexbox. Bien que les deux soient excellents pour créer des mises en page, ils répondent à des objectifs différents et présentent des forces et des faiblesses différentes.
Découvrez comment les deux méthodes de mise en page se comportent et quand les utiliser l'une par rapport à l'autre.
Le comportement différent de CSS Flexbox et Grid
Pour vous aider à visualiser les choses, créez un index.html fichier dans votre dossier préféré et collez le balisage suivant :
html>
<htmllang="en">
<head>
<linkrel="stylesheet"href="style.css">
head><body>
<h1>Flexbox vs Gridh1>
<h2>Flexbox:h2><divclass="flex-container">
div>
<div>Lorem.div>
<div>Lorem ipsum dolor sit amet.div>
<div>Lorem ipsum dolor sit amet consectetur.div>
<div>Lorem ipsum dolor sit.div>
<div>Lorem ipsum dolor sit amet consectetur adipisicing elit.
<div>Lorem ipsum dolor sit amet.div>
<div>Lorem ipsum dolor sit amet consectetur.div>
<div>Lorem ipsum dolor sit.div>
div><h2>Grid:h2>
<divclass="grid-container">
<div>Lorem.div>
<div>Lorem ipsum dolor sit amet.div>
<div>Lorem ipsum dolor sit amet consectetur.div>
<div>Lorem ipsum dolor sit.div>
<div>Lorem ipsum dolor sit amet consectetur adipisicing elit.div>
<div>Lorem ipsum dolor sit amet.div>
<div>Lorem ipsum dolor sit amet consectetur.div>
<div>Lorem ipsum dolor sit.div>
div>
body>
html>
Les deux divs contiennent exactement les mêmes enfants, vous pouvez donc appliquer un système différent à chacun et les comparer.
Vous pouvez également voir que le HTML importe un fichier de feuille de style nommé style.css. Créez ce fichier dans le même dossier que index.html et collez-y les styles suivants :
body {
padding: 30px;
}h1 {
color: #A52A2A;
}h2 {
font-size: large;
}
div:not([class]) {
outline: 2pxsolidblack;
padding: 0.5em;
}
Votre page devrait ressembler à ceci :
Maintenant, pour tourner le premier dans une colonne flex, ajoutez simplement le code suivant à votre feuille de style :
.flex-container {
display: flex;
}
Voici le résultat :
Le conteneur flexible div présente désormais ses éléments enfants en colonnes. Ces colonnes sont flexibles et réactives: elles adaptent leur largeur en fonction de l'espace disponible dans la fenêtre. Ce comportement est l'un des principaux concepts de base derrière Flexbox.
Pour éviter le débordement des colonnes dans le conteneur flexible, vous pouvez utiliser le emballage flexible propriété:
.flex-container {
display: flex;
flex-wrap: wrap;
}
S'il n'y a pas assez de place pour que les éléments enfants tiennent sur une ligne, ils vont maintenant s'enrouler et continuer sur la suivante.
Appliquez maintenant une disposition en grille au deuxième en utilisant ce CSS :
.grid-container {
display: grid;
}
Rien ne se passera avec la déclaration ci-dessus seule car le comportement par défaut de Grid crée des lignes empilées les unes sur les autres.
Pour passer à un affichage en colonnes, vous devez modifier le grille-auto-flux propriété (qui est rangée par défaut):
.grid-container {
display: grid;
grid-auto-flow: column;
}
Voici maintenant le résultat :
Pour spécifier le nombre exact de colonnes souhaitées sur chaque ligne, utilisez colonnes-modèle-de-grille:
.grid-container {
display: grid;
grid-template-columns: repeat(5, 1fr);
}
Cette valeur crée cinq colonnes de largeur égale. Pour obtenir un comportement d'emballage similaire à Flexbox, vous pouvez utiliser des propriétés réactives telles que ajustement automatique et min max:
.grid-container {
display: grid;
grid-template-columns: repeat(auto-fit, min-max(300px, 1fr));
}
Vous entendrez souvent Flexbox et Grid appelés respectivement unidimensionnels et bidimensionnels. Ce n'est cependant pas toute la vérité, car Flexbox et Grid peuvent créer un système de mise en page en deux dimensions. Ils le font simplement de différentes manières, avec des contraintes différentes.
Le plus important est la manière dont vous pouvez contrôler l'aspect unidimensionnel de la mise en page. Prenons par exemple l'image suivante :
Observez la cohérence de la colonne de la grille et l'inégalité de chaque colonne de la Flexbox. Chaque ligne/colonne d’un conteneur flexible est indépendante des autres. Certains peuvent donc être plus volumineux que d’autres, en fonction de la taille de leur contenu. Ceux-ci ressemblent moins à des colonnes qu’à des blocs indépendants.
La grille fonctionne différemment, en configurant une grille 2D avec des colonnes verrouillées par défaut. Une colonne avec un texte court aura la même taille qu'une colonne avec un texte beaucoup plus long, comme le montre l'image ci-dessus.
En résumé, CSS Grid est un peu plus structuré, tandis que Flexbox est plus structuré. système de mise en page flexible et réactif. Ces systèmes d’aménagement alternatifs portent bien leur nom !
Quand utiliser Flexbox
Souhaitez-vous vous appuyer sur le dimensionnement intrinsèque de chaque colonne/ligne, tel que défini par leur contenu? Ou souhaitez-vous avoir un contrôle structuré du point de vue des parents? Si votre réponse est la première, alors Flexbox est la solution parfaite pour vous.
Pour le démontrer, considérons un menu de navigation horizontal. Remplacez le balisage dans le balises avec ceci:
<h1>Flexbox vs. Gridh1><headerclass="flex">
<h2>Flexboxh2><nav>
<ulclass="nav-list">
<li><ahref="">Homea>li>
<li><ahref="">About Usa>li>
<li><ahref="">Service Information Goes Herea>li>
<li><ahref="">Blog Contacta>li>
<li><ahref="">a>li>
ul>
nav>
header><headerclass="grid">
<h2>Gridh2>
<nav>
<ulclass="nav-list">
<li><ahref="">Homea>li>
<li><ahref="">About Usa>li>
<li><ahref="">Service Information Goes Herea>li>
<li><ahref="">Blog Contacta>li>
<li><ahref="">a>li>
ul>
nav>
header>
Remplacez le balisage dans le fichier CSS par ceci :
.nav-list {
list-style: none;
margin: 0;
padding: 0;
}header {
--border-width: 5px;
border: var(--border-width) solidblack;
margin-bottom: 30px;
}header > *:first-child {
border: var(--border-width) solid#FFC0CB;
margin: 0;
}
li {
border: var(--border-width) solid#90EE90;
}
Voici le résultat :
Transformez maintenant la première navigation en une mise en page flexible et la seconde en une mise en page en grille en ajoutant le CSS suivant :
.flex.nav-list {
display: flex;
gap: 1em;
flex-wrap: wrap;
}
.grid.nav-list {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
Comparez les résultats pour voir lequel était le plus approprié :
D'après l'image ci-dessus, vous pouvez voir que Flexbox est la solution parfaite dans ce cas. Vous avez des éléments que vous souhaitez placer les uns à côté des autres et conserver leur taille intrinsèque (grande ou petite selon la longueur du texte). Avec Grid, chaque cellule a une largeur fixe, et cela n'a pas l'air aussi beau, du moins avec des liens en texte brut.
Quand utiliser la grille CSS
Grid excelle vraiment lorsque vous souhaitez créer un système rigide à partir du parent. Un exemple est un ensemble d'éléments de carte qui doivent être de même largeur, même s'ils contiennent des quantités de contenu différentes.
Remplacez le balisage à l'intérieur du balises avec ceci:
<h1>Flexbox vs. Gridsh1><sectionclass="cards">
<h2>Some cardsh2><divclass="columns">
<articleclass="card">
<h3class="card__title">Fun Stuffh3>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit.p><ul>
<li>Loremli>
<li>Ipsumli>
<li>Excavateli>
ul>
article><articleclass="card">
<h3class="card__title">Fun Stuffh3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.p><ul>
<li>Loremli>
<li>Ipsumli>
<li>Excavateli>
ul>
article><articleclass="card">
<h3class="card__title">A Longer Title Than Othersh3><p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Facere
excepturi sit ea dolores totam veniam qui voluptates commodi,
perferendis et!p>
<ul>
<li>Loremli>
<li>Ipsumli>
<li>Excavateli>
ul>
article>
div>
section>
Ajoutez ce CSS :
.columns {
display: flex;
gap: 1em;
}article {
background-color: #90EE90;
color: black;
padding: 15px;
}
ul {
background-color: white;
padding: 2px;
list-style: none;
}
Vous commencez avec un affichage Flexbox pour voir à quoi il ressemble, afin de pouvoir le comparer à l'affichage en grille. Voici le résultat :
Remarquez à quel point la dernière colonne est plus grande que les autres en raison de son dimensionnement intrinsèque, ce que Flexbox gère bien. Mais pour leur donner la même largeur en utilisant Flexbox, vous devrez aller à l'encontre de ce dimensionnement intrinsèque en ajoutant ce qui suit :
.columns > * {
flex: 1;
}
Cela fait l'affaire. Mais Grid est mieux adapté à des cas comme celui-ci. Il vous suffit de spécifier le nombre de colonnes et le tour est joué :
.columns {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 1em;
}
Voici le résultat :
Un autre avantage de l’utilisation de Grid est que le parent contrôle la disposition des enfants. Vous pouvez ainsi ajouter et supprimer des éléments enfants sans vous soucier de casser la mise en page.
Alors, quand devriez-vous utiliser Grid ou Flexbox?
En résumé, CSS Grid est idéal lorsque vous souhaitez un contrôle structuré du point de vue du parent, avec une taille de colonnes égale quelle que soit la taille de son contenu individuel.
Flexbox, en revanche, est idéal lorsque l'on souhaite un système plus flexible basé sur le dimensionnement intrinsèque des éléments.