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

Question

给定9个divs一个接一个，我想通过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

这种布局很简单，使用 CSS flexbox。对 HTML 没有任何更改。

.grid {
  display: flex;                       /* establish flex container */
  flex-wrap: wrap;                     /* enable flex items to wrap */
  justify-content: space-around;
  
}
.cell {
  flex: 0 0 32%;                       /* don't grow, don't shrink, width */
  height: 50px;
  margin-bottom: 5px;
  background-color: #999;
}
.cell:nth-child(3n) {
  background-color: #F00;
}

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

---

flexbox 的好处：

1. 最小代码；非常高效
2. centering, both vertically and horizontally, is simple and easy
3. equal height columns are simple and easy
4. multiple options for aligning flex elements
5. 反应灵敏
6. 与浮动和表格不同，它们提供有限的布局容量，因为它们从未用于构建布局，flexbox 是一种现代 (CSS3) 技术，具有广泛的选项。

---

要了解有关 flexbox 的更多信息，请访问：

• Methods for Aligning Flex Items
• Using CSS flexible boxes~MDN
• A Complete Guide to Flexbox ~ CSS 技巧
• What the Flexbox?!~YouTube视频教程

---

浏览器支持：

所有主流浏览器都支持 Flexbox，except IE < 10。一些最新的浏览器版本，例如 Safari 8 和 IE10，需要vendor prefixes。要快速添加前缀，请使用Autoprefixer。更多详情请见this answer。

Answer 2

只需添加另一个，您还可以仅使用一个<div> 制作一个 3x3 网格。 Plunker

HTML：

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

CSS：

.grid {
  width: 50px; height: 50px;
  background-color: red;
  border-top: 50px solid red;
  border-bottom: 50px solid red;
  margin: 0 50px;
  position: relative;
  box-shadow: inset 0 4px 0 -2px white,
              inset 0 -4px 0 -2px white;
}
.grid::before {
  content: '';
  width: 50px; height: 50px;
  background-color: red;
  border-top: 50px solid red;
  border-bottom: 50px solid red;
  margin: 0;
  position: absolute; left: -52px; top: -50px;
  box-shadow: inset 0 4px 0 -2px white,
              inset 0 -4px 0 -2px white;
}
.grid::after {
  content: '';
  width: 50px; height: 50px;
  background-color: red;
  border-top: 50px solid red;
  border-bottom: 50px solid red;
  margin: 0;
  position: absolute; right: -52px; top: -50px;
  box-shadow: inset 0 4px 0 -2px white,
              inset 0 -4px 0 -2px white;
}

Answer 3

除了@Michael_B 对使用flexbox 的出色回答之外，您还可以使用

• CSS 表格

  或

• 浮动：左

  两者都支持旧浏览器，例如 IE 8/9，flexbox 不支持。

注意 IE8 不支持nth-child 但支持first/last-child

选项 1（CSS 表格）：对 HTML 进行更改，将每 3 个单元格换成一行。

.grid {
  display: table;
  border-spacing: 5px
}
.row {
  display: table-row
}
.cell {
  width: 50px;
  height: 50px;
  background: grey;
  display: table-cell;
}
.row div:last-child {
  background: red
}

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

---

更新

选项 2 (float:left)：不更改 HTML，在每个 (4th)n 项上使用 clear:left。

.cell {
  width: 50px;
  height: 50px;
  background: grey;
  float: left;
  margin: 5px
}
.cell:first-child + div+ div,
.cell:first-child + div+ div + div + div + div,
.cell:first-child + div+ div + div + div + div + div + div + div {
  background: red
}
.cell:first-child + div+ div + div,
.cell:first-child + div+ div + div + div + div + div,
.cell:first-child + div+ div + div + div + div + div + div + div + div {
  clear: left
}

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

Answer 4

我知道问题是要求一个非浮动清晰的解决方案，但是在尝试了 flexbox 解决方案后，我发现它没有保留我的元素的宽度（进一步阅读表明我可能需要在容器上设置宽度元素）。然而，在 3x3 网格的特定情况下（与 n 行三列的网格相反），浮动清除解决方案更简洁且效果更好。如果其他人像我一样在寻找解决方案时找到这个答案：

.cell {
  float: left;
  height: 100px;
  width: 100px;
  margin: 5px;
}
.cell:nth-child(4) {
  clear: left;
}
.cell:nth-child(7) {
  clear: left;
}

Answer 5

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

.grid {
  display: grid;
  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>