CSS Grid vs. Flexbox

Introduction

Flexbox et CSS Grid sont deux outils importants pour la mise en page de vos pages web.

Dans cet article, nous examinerons les différences entre ces deux systèmes de mise en page de pages et quand choisir l'un ou l'autre.

En tant que développeurs frontend, nous utilisons souvent ces systèmes de mise en page quotidiennement, souvent par choix personnel, nous choisissons Flexbox ou CSS Grid, mais dans certains cas, l'un fait le travail facilement et est le seul pertinent.

Dans cet article, je donnerai des exemples d'utilisation où l'un des systèmes de mise en page est clairement plus pertinent que l'autre.

Avant de commencer, il est important de noter une différence clé entre Flexbox et CSS Grid. Flexbox est unidimensionnel, ce qui signifie qu'il ne peut être utilisé que sur l'axe x ou y, tandis que CSS Grid est bidimensionnel, permettant une utilisation simultanée sur les deux axes.

Commençons!

Box

Le code ici est très simple, et vous pouvez voir le contenu descendant, remplissant les blancs.

<div class="flex-container">
  <div class="flex-item">1. Do one thing</div>
  <div class="flex-item">2. Css is super cool and Tailwind also.</div>
  <div class="flex-item">3. Darkness cannot drive out darkness</div>
  <div class="flex-item">4. Life is a succession of lessons</div>
  <div class="flex-item">
    5. Your time is limited, so don't waste it living someone else's life. Don't
    be trapped by dogma – which is living with the results of other people's
    thinking. -Steve Jobs
  </div>
  <div class="flex-item">6. Be yourself; everyone else is already taken.</div>
</div>

.flex-container {
  display: flex;
  flex-flow: row wrap;
  gap: 8px;
  padding: 16px;
}

.flex-item {
  border: 1px solid;
  padding: 8px;
  border-radius: 8px;
  background-color: lavenderblush;
}

Essayons de faire la même chose en CSS Grid et nous pouvons tout de suite voir à quel point c'est complexe et le résultat n'est pas le même.

.grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 8px;
  padding: 16px;
}

.grid-item {
  border: 1px solid;
  padding: 8px;
  border-radius: 8px;
  background-color: lavender;
}

Pour que les divs s'étendent sur plusieurs lignes, nous avons dû définir une taille nous-mêmes en utilisant minmax(200px, 1fr), ce qui permet au CSS Grid de remplir à la fois les lignes et les colonnes avec du contenu.

Le résultat que nous voulions était le même que pour Flexbox, prendre la largeur et revenir à la ligne si ce n'était pas suffisant.

Overflow Scroll

Ici, ce que nous voulons, c'est que les divs dépassent leurs parents, nous voulons donc un défilement horizontal.

Flexbox

.flex-container {
  display: flex;
  flex-flow: row;
  gap: 8px;
  padding: 16px;
}

.flex-item {
  flex: 1 0 auto;
  border: 1px solid;
  padding: 8px;
  border-radius: 8px;
  background-color: sandybrown;
}

CSS Grid

.grid-container {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: max-content;
  gap: 8px;
  padding: 16px;
}

.grid-item {
  border: 1px solid;
  padding: 8px;
  border-radius: 8px;
  background-color: lightcoral;
}

Ici, la situation est assez simple : l'utilisation de Flexbox ou de Grid dépend de la préférence.

Box center

La question la plus fréquemment posée en CSS, comment centrer une div.

CSS Grid et Flexbox facilitent vraiment notre travail.

Flexbox facilite le centrage du contenu à la fois horizontalement et verticalement. En utilisant place-content: center, nous obtenons un centrage parfait.

Flexbox

<div class="flex-container">
  <div class="flex-item">Your time is limited, so don't waste it</div>
</div>

.flex-container {
  display: flex;
  flex-flow: row wrap;
  gap: 8px;
  min-height: 100vh;
  place-content: center;
}

.flex-item {
  border: 1px solid;
  padding: 8px;
  border-radius: 8px;
  background-color: lightskyblue;
}

L'exemple suivant montre à quel point il est simple de centrer le contenu à l'aide de la grille CSS. Il est facile de voir ce que fait la grille CSS

CSS Grid

<div class="grid-container">
  <div class="grid-item">CSS Grid makes layout a breeze!</div>
</div>

.grid-container {
  display: grid;
  gap: 8px;
  min-height: 100vh;
  place-content: center;
}

.grid-item {
  border: 1px solid;
  padding: 8px;
  border-radius: 8px;
  background-color: lightsalmon;
}

Simple layouts

En ce qui concerne les mises en page simples à colonne unique, il n'y a pas de différences majeures entre les deux exemples suivants,

Flexbox

<div class="flex-container">
  <div class="flex-item">Header</div>
  <div class="flex-item">
    "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
    non proident, sunt in culpa qui officia deserunt mollit anim id est
    laborum."
  </div>
  <div class="flex-item">Footer</div>
</div>

.flex-container {
  display: flex;
  flex-direction: column;
  padding: 36px 18px;
  gap: 8px;
  text-align: center;
}

.flex-item {
  border: 1px solid;
  padding: 8px;
}

Grid

<div class="grid-container">
  <div class="grid-item">Header</div>
  <div class="grid-item">
    "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
    non proident, sunt in culpa qui officia deserunt mollit anim id est
    laborum."
  </div>
  <div class="grid-item">Footer</div>
</div>

.grid-container {
  display: grid;
  gap: 8px;
  padding: 36px 18px;
  text-align: center;
}

.grid-item {
  border: 1px solid;
  padding: 8px;
}

Complex layouts

Nous allons ici reproduire la mise en page d'un site web classique, c'est-à-dire une barre de navigation, deux apartés, un contenu principal et un pied de page en dessous.

Flexbox

<div class="flex-container">
  <header>Header</header>
  <article>
    <aside>Aside</aside>
    <main>
      "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
      tempor incididunt ut labore et dolore magna aliqua."
    </main>
    <aside>Aside</aside>
  </article>
  <footer>Footer</footer>
</div>

.flex-container {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  padding: 36px 18px;
  gap: 8px;
  text-align: center;
}

header,
footer,
aside,
main {
  border: 1px solid;
  padding: 8px;
}

main {
  flex: 2;
}

aside {
  flex: 1;
  display: flex;
  place-content: center;
  flex-direction: column;
}

article {
  flex: 1;
  display: flex;
  flex-direction: row;
  gap: 8px;
}

CSS Grid

<div class="grid-container">
  <header>Header</header>
  <aside>Aside</aside>
  <div class="grid-item">
    "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua."
  </div>
  <aside>Aside</aside>
  <footer>Footer</footer>
</div>

.grid-container {
  min-height: 100vh;
  display: grid;
  gap: 8px;
  padding: 36px 18px;
  text-align: center;
  grid-template-columns: 1fr 2fr 1fr;
  grid-template-rows: auto 1fr auto;
}

.grid-container > * {
  border: 1px solid;
  padding: 8px;
}

header,
footer {
  grid-column: span 3;
}

aside {
  display: grid;
  place-content: center;
}

Conclusion

Comme vous pouvez le constater, il n'y a pas toujours une bonne adéquation entre Flexbox et CSS Grid, mais certains contextes nous obligent à utiliser l'un plutôt que l'autre pour nous simplifier la tâche.