弹性/网格布局。需要建议如何使用 Grid CSS 模型的 Flex 正确布局块答案

【问题标题】：Flex / grid layout. Need advice how to lay out blocks properly using Flex of Grid CSS model弹性/网格布局。需要建议如何使用 Grid CSS 模型的 Flex 正确布局块
【发布时间】：2021-08-16 15:36:33
【问题描述】：

嗨，社区！
我需要建议，是否可以实现以下卡片结构（无需额外的包装器）？

期望的行为： 第一行应该有 3 张牌，第二行 - 2 张牌，第 3 行 - 3 张牌，然后继续…… 为了更好地理解问题，我附上了前 2 行的简单示例。

* {
  box-sizing: border-box;
}

.list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.list .item {
  display: flex;
  justify-content: center;
  width: 33%;
  padding: 20px;
}
.list .item .card {
  width: 80%;
  height: 200px;
  background-color: #000;
}

<div class="list">
  <div class="item"><div class="card"></div></div>
  <div class="item"><div class="card"></div></div>
  <div class="item"><div class="card"></div></div>
  <div class="item"><div class="card"></div></div>
  <div class="item"><div class="card"></div></div>
</div>

【问题讨论】：

您希望卡片之间的空间相等还是卡片宽度相等？因为你不能同时
卡片之间的空间，如上例所示

标签： html css flexbox css-grid

【解决方案1】：

如果你可以为卡片设置静态宽度，你可以试试这样：

* {
  box-sizing: border-box;
}

.list {
  display: grid;
  width: -moz-fit-content;
  width: fit-content;
  margin: 0 auto;
  grid-template-columns: repeat(6, 1fr);
  justify-content: center;
}

.list .item {
  display: flex;
  justify-content: center;
  padding: 20px;
  grid-column: span 2;
}

.list .item:nth-child(5n - 1) {
  justify-content: flex-end;
}

.list .item:nth-child(5n) {
  justify-content: flex-start;
}

.list .item:nth-child(5n - 1),
.list .item:nth-child(5n) {
  grid-column: span 3;
}


.list .item .card {
  width: 200px; /* static width */
  height: 200px;
  background-color: #000;
}

<div class="list">
  <div class="item"><div class="card"></div></div>
  <div class="item"><div class="card"></div></div>
  <div class="item"><div class="card"></div></div>
  <div class="item"><div class="card"></div></div>
  <div class="item"><div class="card"></div></div>
  <div class="item"><div class="card"></div></div>
  <div class="item"><div class="card"></div></div>
  <div class="item"><div class="card"></div></div>
  <div class="item"><div class="card"></div></div>
  <div class="item"><div class="card"></div></div>
  <div class="item"><div class="card"></div></div>
  <div class="item"><div class="card"></div></div>
  <div class="item"><div class="card"></div></div>
  <div class="item"><div class="card"></div></div>
  <div class="item"><div class="card"></div></div>
</div>

【讨论】：

为什么不把width: 100%;写在卡片上？
因为卡片的宽度不同，我猜这不是他想要的。
我用 flex 尝试过类似的东西，但是第二行卡片之间的距离与第一行不同。因此，不幸的是，这种方法不适合所需的布局（
哦，我明白了，@IhorLavs 我认为您应该更具体地提出您的问题
@doğukan 哇，看起来很棒。我需要在我的应用程序中尝试这种方法。非常感谢您的帮助

【解决方案2】：

您可以将您想要的 2 项放在一行中稍大一些，以便将第 3 项推到下一行。 div 的大小不完全相同（比上/下行中的 3 个项目大 0.6%），但很难注意到

.list .item:nth-child(5n - 1){
  width: 33.6%;
}
.list .item:nth-child(5n) {
  width: 33.6%;
}

* {
  box-sizing: border-box;
}

.list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.list .item {
  display: flex;
  justify-content: center;
  width: 33%;
  padding: 20px;
}
.list .item .card {
  width: 80%;
  height: 200px;
  background-color: #000;
}

<div class="list">
  <div class="item"><div class="card"></div></div>
  <div class="item"><div class="card"></div></div>
  <div class="item"><div class="card"></div></div>
  <div class="item"><div class="card"></div></div>
  <div class="item"><div class="card"></div></div>
  <div class="item"><div class="card"></div></div>
  <div class="item"><div class="card"></div></div>
  <div class="item"><div class="card"></div></div>
  <div class="item"><div class="card"></div></div>
  <div class="item"><div class="card"></div></div>
  <div class="item"><div class="card"></div></div>
  <div class="item"><div class="card"></div></div>
  <div class="item"><div class="card"></div></div>
  <div class="item"><div class="card"></div></div>
  <div class="item"><div class="card"></div></div>
</div>

【讨论】：

【解决方案3】：

您可以为两个元素添加一个微小的边距，并且您可以拥有相同的宽度以及元素之间的相同距离：

* {
  box-sizing: border-box;
}

.list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.list .item {
  display: flex;
  justify-content: center;
  width: 33%;
  padding: 20px;
}

.list .item .card {
  width: 80%;
  height: 200px;
  background-color: #000;
}

.list .item:nth-child(5n + 4) {
  margin-left:1%
}

.list .item:nth-child(5n + 5) {
  margin-right:1%
}

<div class="list">
  <div class="item">
    <div class="card"></div>
  </div>
  <div class="item">
    <div class="card"></div>
  </div>
  <div class="item">
    <div class="card"></div>
  </div>
  <div class="item">
    <div class="card"></div>
  </div>
  <div class="item">
    <div class="card"></div>
  </div>
  <div class="item">
    <div class="card"></div>
  </div>
  <div class="item">
    <div class="card"></div>
  </div>
  <div class="item">
    <div class="card"></div>
  </div>
  <div class="item">
    <div class="card"></div>
  </div>
   <div class="item">
    <div class="card"></div>
  </div>
</div>

【讨论】：