J’utilise souvent display:flex quand je fais une liste d’articles ou de produits avec css, mais je dois quand même utiliser display:grid ? Je vais donc essayer.

Personnellement, je suis habitué à display:flex, donc je ne suis pas très doué pour display:grid.

Si c’est une simple liste, il n’y a pas de problème, mais ça a l’air de pouvoir gérer des mises en page assez complexes, et au contraire, ça me fait me demander à chaque fois « Qu’est-ce que c’est que ça ? Comment je fais pour l’assembler ? » Je suis court-circuité dans ma tête (…) ;

Bon, je vais essayer display:flex comme d’habitude.

  <div class="list01">
    <div class="item">item</div>
    <div class="item">item</div>
    <div class="item">item</div>
    <div class="item">item</div>
    <div class="item">item</div>
    <div class="item">item</div>
  </div>
  <style>
    .list01 {
      width: 900px;
      background: #ddd;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
    }
    .list01 .item {
      margin-bottom: 25px;
      width: 32%;
      height: 100px;
      color: #fff;
      background: #000;
      display: flex;
      justify-content: center;
      align-items: center;
      position: relative;
    }
  </style>

Voici à quoi cela ressemble lorsqu’il est affiché dans un navigateur.

Modifions maintenant la partie css de ce code pour afficher : grid.

  <div class="list01">
    <div class="item">item</div>
    <div class="item">item</div>
    <div class="item">item</div>
    <div class="item">item</div>
    <div class="item">item</div>
    <div class="item">item</div>
  </div>
  <style>
    .list01 {
      width: 900px;
      background: #ddd;
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 2%;
    }
    .list01 .item {
      margin-bottom: 25px;
      height: 100px;
      color: #fff;
      background: #000;
      display: flex;
      justify-content: center;
      align-items: center;
      position: relative;
    }
  </style>

Voici à quoi cela ressemble lorsqu’il est affiché dans un navigateur.

Ce que je n’aime pas dans GIRD, c’est que je n’aime pas les grid-template-columns (. ;

Je spécifie repeat(3, 1fr), donc c’est comme 3 colonnes avec une largeur de 1fr. La largeur des colonnes devrait être…

Tweet