带有 CSS 网格的蛇线网格
查询：在面向列的 CSS 网格中生成蛇状单元格模式是否可行，类似于下面的例子？
01 06 07 12
02 05 08 11
03 04 09 10解决方案：
假设网格总是有三行，这是一个聪明的解决方案：
<code class="css">.container {
display: grid;
grid-template-rows: 20px 20px 20px;
grid-auto-columns: 20px;
grid-auto-flow: column dense;
}
.container > div:nth-child(6n + 4) { grid-row: 3; }
.container > div:nth-child(6n + 5) { grid-row: 2; }
/* Cosmetic styles */
.container {
grid-gap: 5px;
counter-reset: num;
margin: 10px;
}
.container > div {
border: 1px solid;
}
.container > div:before {
content: counter(num);
counter-increment: num;
}</code>关键这个解决方案是 nth-child() 选择器，它根据子元素在父元素中的位置来选择子元素。 grid-auto-flow: 列密集使元素保持密集的列结构。
当您想要蛇形填充模式的灵活性但又不必定义每个列时，此技术特别有用手动单个单元格的位置。
以上是CSS GridQuery 可以在面向列的网格中创建蛇形单元格模式吗？的详细内容。更多信息请关注PHP中文网其他相关文章！
