CSS网格布局对部分未使用定位属性的元素，使用自动定位规则布局。同时，使用定位属性的元素也可以利用自动定位功能。例如我们定义 grid-column-end 和 grid-row-end 属性设置为 span 2，而不设置项目的开始线，这意味着开始线是由自动定位规则确定的，结束线跨越两条轨道。代码示例：
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<style>
.wrapper {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-auto-rows: 100px;
grid-gap: 10px;
}
.wrapper div:nth-child(4n+1) {
grid-column-end: span 2;
grid-row-end: span 2;
background-color: #ffa94d;
}
.wrapper div:nth-child(2) {
grid-column: 3;
grid-row: 2 / 4;
}
.wrapper div:nth-child(5) {
grid-column: 1 / 3;
grid-row: 1 / 3;
}
.wrapper div {
background-color: turquoise;
}
</style>
</head>
<body>
<div class="wrapper">
<div>One</div>
<div>Two</div>
<div>Three</div>
<div>Four</div>
<div>Five</div>
<div>Six</div>
<div>Seven</div>
<div>Eight</div>
<div>Nine</div>
<div>Ten</div>
<div>Eleven</div>
<div>Twelve</div>
</div>
</body>
</html>
布局效果：
如上我们可以看到未明确定位过的项目，会按照它们在DOM中的顺序被网格自动处理，同时也出现很多缺口，如果要布局的项目顺序并不重要，可以创建一种没有缺口的布局，这种效果通过将
grid-auto-flow 属性值中加入 dense 关键字实现。代码示例：
.wrapper {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-auto-rows: 100px;
grid-gap: 10px;
grid-auto-flow: dense;
}
布局效果：
网友评论