如何通过 CSS 创建 3x3 网格? [英] How do I create a 3x3 grid via CSS?

问题描述

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

我该怎么做?

.cell {高度:50px；宽度:50px；背景色:#999；显示:内联块；}.cell:nth-child(3n) {背景色:#F00；/* 我应该使用什么属性来在这个元素之后换行?*/}/* 这不起作用；至少不是在 safari */.cell:nth-child(3n)::after {显示:块；}

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

<小时>

注意:我不想要 float/clear 解决方案.重点是 CSS 而不是 HTML 重构.

如果我添加 content: 'A';空白:pre; 到 ::after 输出结果很难看.

.cell {高度:50px；宽度:50px；背景色:#999；显示:内联块；}.cell:nth-child(3n) {背景色:#F00；/* 我应该使用什么属性来在这个元素之后换行?*/}.cell:nth-child(3n)::after {显示:内联；内容:'A';空白:预；}

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

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

解决方案

现在 CSS 网格 相当 非常 得到很好的支持，我想我会用更现代的解决方案补充其他答案.

.grid {显示:网格；网格间隙:1px；网格模板列:重复(3，1fr)；}div >div {填充:10px；背景颜色:#ccc；}

<div>项目</div><div>项目</div><div>项目</div><div>项目</div><div>项目</div><div>项目</div><div>项目</div><div>项目</div><div>项目</div>

Given 9 divs one after another, I want to create a grid 3X3 via CSS.

How do I do that?

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

---

Note: I don't want float/clear solution. Focus is on CSS and not HTML restructure.

If I add content: 'A'; white-space: pre; to ::after output comes out to be ugly.

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

How do I go about getting all div in a 3X3 row-column layout?

解决方案

Now that CSS Grid is fairly very well supported, I thought I'd supplement the others answers with a more modern solution.

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

这篇关于如何通过 CSS 创建 3x3 网格?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！