如何通过 CSS 创建 3x3 网格？

Question

给定 9 div 一个接一个，我想通过 CSS 创建一个 3X3 的网格。

我怎么做？

 .cell {
  height: 50px;
  width: 50px;
  background-color: #999;
  display: inline-block;
}

.cell:nth-child(3n) {
  background-color: #F00;
  /* what property should I use to get a line break after this element? */
}

/* this doesn't work; at least not in safari */
.cell:nth-child(3n)::after {
  display: block;
}

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

---

注意： 我不想要 float/clear 解决方案。重点是 CSS 而不是 HTML 重组。

如果我将 content: '\A'; white-space: pre; 添加到 ::after 输出结果很难看。

 .cell {
  height: 50px;
  width: 50px;
  background-color: #999;
  display: inline-block;
}

.cell:nth-child(3n) {
  background-color: #F00;
  /* what property should I use to get a line break after this element? */
}

.cell:nth-child(3n)::after {
  display: inline;
  content: '\A';
  white-space: pre;
}

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

如何在 3X3 行列布局中获取所有 div？

原文由 user900360 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

02/2022 更新： 正如 David 在评论中提到的， grid-gap 现已弃用，取而代之的是更简洁的 gap 。我更新了下面的代码片段以反映这一点。

---

既然 CSS Grid 得到了相当 好的 支持，我想我会用更现代的解决方案来补充其他答案。

 .grid {
  display: grid;
  gap: 1px;
  grid-template-columns: repeat(3, 1fr);
}

div > div {
  padding: 10px;
  background-color: #ccc;
}

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

原文由 Andy Hoffman 发布，翻译遵循 CC BY-SA 4.0 许可协议