在用 css 制作文章或产品列表时，我经常使用 display:flex，但还是要使用 display:grid？所以我想试一试。

就我个人而言，我习惯使用 display:flex，所以不太擅长 display:grid。

如果是一个简单的列表，没有什么问题，但它似乎能处理相当复杂的布局，相反，它让我每次都很纳闷：”那是什么？我该怎么把它组合起来？我的脑袋短路了（……）；

好吧，我会像往常一样试试 display:flex。

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

这就是在浏览器中显示时的样子。

现在，让我们将代码的 css 部分改为 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>

这就是在浏览器中显示的效果。

我不喜欢 GIRD 的地方在于，我不喜欢 grid-template-columns （.;

我指定了 repeat(3,1fr)，因此它就像是宽度为 1fr 的 3 列。列的宽度应该是…

Tweet