仅使用 CSS 将元素列表显示为表格？

Question

将列表显示为具有 3 列的表格，项目均匀分布，10px每边和行之间都有边距。

.item { width: 10px; height: 10px; background: black; }
.grid { background: #eee; }

<div class="grid">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

应该呈现为

可以通过flex布局实现这一点，但它需要更复杂的 HTML，请参见下面的示例。

.item { width: 10px; height: 10px; background: black; }
.grid { background: #eee; }

<div class="grid">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

.item { width: 10px; height: 10px; background: black; }

.grid { background: #eee; padding: 10px 10px 0 10px; }
.row { display: flex; justify-content: space-between; padding: 0 0 10px 0;  }

我想知道是否可以使用纯 CSS，而不添加任何额外的 HTML 元素。的大小.items不应该改变，这是未知的。

Answer 1

您可以通过在第一行和最后一行之间添加一个隐藏元素来使用 flexbox 来做到这一点，width:100%这样您就可以避免更改 html：

.item {
  width: 10px;
  height: 10px;
  background: black;
}

.row {
  display: flex;
  justify-content: space-between;
  padding: 10px;
  background: #eee;
  flex-wrap: wrap;
}

.row:after {
  content: "";
  width: 100%;
  height: 10px;
}

.row :nth-child(n + 4) {
  order: 1;
}

<div class="row">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

如果元素数量未知，您可以考虑使用 CSS 网格：

.item {
  width: 10px;
  height: 10px;
  background: black;
}
.row {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  grid-gap: 10px;
  padding:10px;
  background: #eee;
}
.row :nth-child(3n + 2) {
  margin:auto;
}
.row :nth-child(3n + 3) {
  margin-left:auto;
}

<div class="row">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>