蛇线中的网格自动流？

Question

我想知道，是否可以在列模式下使用 css grid 并以蛇形线填充单元格。像这样：

    01 06 07 12
    02 05 08 11
    03 04 09 10

对此有何建议？谢谢你的帮助。

Answer 1

如果我们考虑到您将始终有 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>