Suelo usar display:flex cuando hago una lista de artículos o productos con css, pero sigo teniendo que usar display:grid? Así que voy a intentarlo.

Personalmente, estoy acostumbrado a display:flex, así que no se me da muy bien display:grid.

Si se trata de una simple lista, no hay problema, pero parece que puede manejar diseños bastante complejos y, por el contrario, me hace preguntarme cada vez: «¿Qué es eso? ¿Cómo lo armo?». Tengo un cortocircuito en la cabeza (…);

Bueno, probaré con display:flex como siempre.

  <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>

Esto es lo que parece cuando se muestra en un navegador.

Ahora vamos a cambiar la parte css de este código para mostrar: 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>

Esto es lo que parece cuando se muestra en un navegador.

Lo que no me gusta de GIRD es que no me gusta grid-template-columns (. ;

Especifico repeat(3, 1fr), por lo que son como 3 columnas con un ancho de 1fr. El ancho de las columnas debería ser…

Tweet