如何通过CSS创建一个3x3网格？ [英] How do I create a 3x3 grid via CSS?
本文介绍了如何通过CSS创建一个3x3网格？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
如果9 div 一个接一个，我想通过CSS创建一个网格3X3。
.cell {height：50px; width：50px; background-color：＃999; display：inline-block;}。cell：nth-child（3n）{background-color：＃F00; / *我应该使用什么属性在这个元素后得到换行符？ * /} / *这不工作;至少不在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'
p> .cell {height：50px; width：50px; background-color：＃999; display：inline-block;}。cell：nth-child（3n）{background-color：＃F00; / *应该使用什么属性在这个元素之后得到换行符？ * /}。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？
解决方案是简单的CSS flexbox。没有对HTML的更改。
.grid {display：flex; / *建立flex容器* / flex-wrap：wrap; / * enable flex items to wrap * / justify-content：space-around; } .cell {flex：0 0 32％; / *不生长，不收缩，宽度* / 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的优点：
- 最小代码;非常高效
- 垂直和水平对中，简单易用 li>
- 等高列很简单易用
- 用于对齐弹性元素的多个选项
- 响应快捷
- 不像浮点和表格，布局容量有限，因为它们从来不是用于构建布局，flexbox是一种现代（CSS3）技术，具有广泛的选项。
要了解有关flexbox的更多信息，请访问：
- 对齐Flex项目的方法
- < a href =https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes =nofollow noreferrer>使用CSS灵活框〜MDN
- Flexbox完整指南 〜CSS-Tricks
- Flexbox？ a>〜YouTube视频教程
所有主流浏览器都支持Flexbox，除IE外< 10 。某些最新的浏览器版本（例如Safari 8和IE10）需要供应商前缀。要快速添加前缀，请使用 Autoprefixer 。有关此答案的更多详情。
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?
解决方案 This layout is simple with CSS flexbox. No changes to 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>
Benefits of flexbox:
- minimal code; very efficient
- centering, both vertically and horizontally, is simple and easy
- equal height columns are simple and easy
- multiple options for aligning flex elements
- it's responsive
- unlike floats and tables, which offer limited layout capacity because they were never intended for building layouts, flexbox is a modern (CSS3) technique with a broad range of options.
To learn more about flexbox visit:
- Methods for Aligning Flex Items
- Using CSS flexible boxes ~ MDN
- A Complete Guide to Flexbox ~ CSS-Tricks
- What the Flexbox?! ~ YouTube video tutorial
Browser support:
Flexbox is supported by all major browsers, except IE < 10. Some recent browser versions, such as Safari 8 and IE10, require vendor prefixes. For a quick way to add prefixes use Autoprefixer. More details in this answer.
这篇关于如何通过CSS创建一个3x3网格？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
