蛇行中的网格自动流动? [英] grid-auto-flow in snake lines?

问题描述

我想知道，是否有可能在列模式下使用css网格并在蛇行中填充单元格.像这样:

I was wondering, if it's possible to use css grid in column mode and fill the cells in snake lines. Like this:

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

对此有何建议?感谢您的帮助.

Any advice on this? Thanks for your help.

推荐答案

如果我们考虑您将始终拥有3行的事实，这是一个主意:

Here is an idea if we consider the fact that you will always have 3 rows:

.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行或任意行:

That you can easily extend to 4 rows or any number:

.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>

这篇关于蛇行中的网格自动流动?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！