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

给定9个

div

s，我想通过CSS创建一个网格3X3

我该怎么做

.cell{
高度：50px；
宽度：50px；
背景色：#999；
显示：内联块；
}
.单元：第n个子单元（3n）{
背景色：#F00；
/*我应该使用什么属性来获取此元素之后的换行符*/
}
/*这不管用；至少不是在狩猎中*/
.单元格：第n个子（3n）：：之后{
显示：块；
}

---

使用CSS flexbox，此布局非常简单。没有对HTML的更改

.grid{
显示：flex；/*建立flex容器*/
灵活包装：包装；/*启用灵活项目包装*/
证明内容：周围的空间；
}
.细胞{
弹性：0 0 32%；/*不增长，不收缩，宽度*/
高度：50px；
边缘底部：5px；
背景色：#999；
}
.单元：第n个子单元（3n）{
背景色：#F00；
}

---

只需添加另一个网格，您也可以仅使用一个

创建一个3x3网格

HTML:

---

除了@Michael_B提供的使用

flexbox

的优秀答案外，您还可以使用

• CSS表格
  或

• 浮动：左
  两者都支持旧浏览器，如IE 8/9，

  flexbox

  不支持

注意IE8不支持

n个子项

，但支持

第一个/最后一个子项

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

.grid{
显示：表格；
边框间距：5px
}
.行{
显示：表格行
}
.细胞{
宽度：50px；
高度：50px；
背景：灰色；
显示：表格单元格；
}
.行分区：最后一个孩子{
背景：红色
}

---

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

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

现在，这是非常重要的，我想我应该用一个更现代的解决方案来补充这个答案

.grid{
显示：网格；
网格间距：1px；
网格模板列：重复（3，1fr）；
}
div>div{
填充：10px；
背景色：#ccc；
}

项目
项目
项目
项目
项目
项目
项目
项目
项目

Hi Anubhav-感谢您的编辑。我把它向后滚只是因为它不起作用。如果要为每个单元指定像素宽度，则需要在容器上指定宽度。否则，除非屏幕非常窄，否则它们不会包裹。这就是我在演示中使用百分比的原因。容器的宽度是多少？答：你说它坏了是什么意思？B.我不是在固定宽度，我是在设置宽度的上限。它包在我的2000px宽的显示器上就可以了。你运行代码了吗？好的。只是要注意浏览器的兼容性。这是和。还要注意，

calc

将不适用于IE11上

flex

速记属性的

flex-basis

组件。您需要直接使用

flex basis

。回答得好。作为旁注，考虑到calc表达式的问题，以及个人喜好，我将删除水平边距，并将flex basis设置为30%。如果有适当的justify内容，条目之间的分隔将是响应性的。呃，我认为IE8不支持

flexbox

。IE9部分是这样的。在

background

或某些相关属性上崩溃。IE9根本不支持，您可以在这里看到，我刚刚给了您另一个解决方案：）对不起，我的错误。在我的脑海里，我在想

calc

。没问题；），正如我刚才所说，我给了你一个跨浏览器的解决方案。它使用HTML重组。这是一个如此简单和优雅的解决方案+1相关：

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

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