我想知道是否可以在列模式下使用 css 网格并以蛇线填充单元格。像这样：
01 06 07 12
02 05 08 11
03 04 09 10
对此有什么建议吗？感谢您的帮助。
如果我们考虑到你总是有 3 行，这里有一个想法：
.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; }
/*.container > div:nth-child(6n + 6) { grid-row:1; } to illustrate the pattern but not needed */
/* Irrelevant styles */
.container {
grid-gap:5px;
counter-reset:num;
margin:10px;
}
.container > div {
border:1px solid;
}
.container > div:before{
content:counter(num);
counter-increment:num;
}
<div class="container">
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
</div>
<div class="container">
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
</div>
<div class="container">
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
</div>
您可以轻松扩展到 4 行或任意数量：
.container {
display:grid;
grid-template-rows:repeat(4,20px);
grid-auto-columns:20px;
grid-auto-flow:column dense;
}
.container > div:nth-child(8n + 5) { grid-row:4; }
.container > div:nth-child(8n + 6) { grid-row:3; }
.container > div:nth-child(8n + 7) { grid-row:2; }
/*.container > div:nth-child(8n + 8) { grid-row:1; }*/
/* For N = number of rows
.container > div:nth-child((2xN)n + (N+1)) { grid-row:N; }
.container > div:nth-child((2xN)n + (N+2)) { grid-row:(N-1); }
....
.container > div:nth-child((2xN)n + (2xN)) { grid-row:1; }
*/
.container {
grid-gap:5px;
counter-reset:num;
margin:10px;
}
.container > div {
border:1px solid;
}
.container > div:before{
content:counter(num);
counter-increment:num;
}
<div class="container">
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
</div>
<div class="container">
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
</div>
<div class="container">
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
</div>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
