CSS grid-auto-flow 属性
CSS grid-auto-flow 属性
CSS grid-auto-flow 属性定义了在网格容器中放置项目的方式。我们可以通过这个属性来控制网格项目的排列顺序、位置和布局。该属性只对没有被放置于网格里的项目有效。
语法
grid-auto-flow: row | column | row dense | column dense;
- row:按行顺序从左到右,逐行放置项目。
- column:按列顺序从上到下,逐列放置项目。
- row dense:会使得一些项目填补之前留下的空隙,使得原本更靠前的项目被放置得更靠后。
- column dense:同上,只不过会按列顺序放置项目。
默认值
默认值为 row
,即按行从左到右顺序放置项目。
适用范围
- 网格元素容器
可继承性
不可继承。
浏览器兼容性
该属性的兼容性较好,但对于 IE 浏览器 11 及以下版本不支持此属性。
示例
.container {
display: grid;
grid-auto-flow: row;
grid-template-columns: repeat(2, 1fr);
grid-gap: 10px;
}
.item {
background-color: #ccc;
padding: 10px;
}
此代码的效果图如下:
建议
grid-auto-flow
属性对项目数量不太固定的网格容器比较适用,更加灵活。
结束语
grid-auto-flow
属性是 CSS 网格布局中的一个非常重要的属性,可以通过这个属性来控制项目在网格容器中的排列方式,非常灵活,方便开发人员进行各种排版设计。