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

Question

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

我该怎么做？

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

                          

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

如果我将content: '\A'; white-space: pre;添加到::after输出就会变得难看。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

如何在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-Tricks
• What the Flexbox?! ~YouTube视频教程

浏览器支持：

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

Answer 2

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

Answer 3

除了@Michael_B使用flexbox的优秀答案外，您还可以使用

• CSS表格

  或

• float：left

  既支持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没有任何更改，在每个（第4个）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

只需添加另一个，您也可以仅使用一个<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 5

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

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