Ich verwende oft display:flex, wenn ich eine Liste von Artikeln oder Produkten mit css erstelle, aber ich muss trotzdem display:grid? verwenden. Ich werde es also ausprobieren.

Ich persönlich bin an display:flex gewöhnt, daher kenne ich mich mit display:grid nicht so gut aus.

Wenn es sich um eine einfache Liste handelt, ist das kein Problem, aber es scheint in der Lage zu sein, ziemlich komplexe Layouts zu handhaben, und im Gegenteil, ich frage mich jedes Mal: „Was ist das? Wie setze ich das zusammen?“ Ich habe einen Kurzschluss im Kopf (…);

Nun, ich werde es wie immer mit display:flex versuchen.

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

So sieht es aus, wenn es in einem Browser angezeigt wird.

Ändern wir nun den css-Teil dieses Codes in display: 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>

So sieht es aus, wenn es in einem Browser angezeigt wird.

Was mir an GIRD nicht gefällt, ist, dass ich keine grid-template-columns (. ;

Ich gebe repeat(3, 1fr) an, so dass es wie 3 Spalten mit einer Breite von 1fr ist. Die Breite der Spalten sollte sein…

Tweet