html - 如何通过 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？

Answer 1

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

---

现在CSS Grid 相当 非常 well supported ，我想我会用更现代的解决方案来补充其他答案。

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