有没有办法在CSS网格中蜿蜒/排队项目流？

Question

默认行为：

|A|B|C|D| |E|F|G|H| |I|J|K|L|

所需行为：

|A|B|C|D| |H|G|F|E| |I|J|K|L|

我已经研究了grid-auto-flow属性和direction属性，但是如果不使用javascript，似乎没有解决方法。有没有办法用CSS做到这一点？

Answer 1

您可以使用flex属性和nth-child选择器

<div class="snakeContainer">
  <div>
    <span>A</span>
    <span>B</span>
    <span>C</span>
    <span>D</span>
  </div>
  <div>
    <span>E</span>
    <span>F</span>
    <span>G</span>
    <span>H</span>
  </div>
  <div>
    <span>I</span>
    <span>J</span>
    <span>K</span>
    <span>L</span>
  </div>
</div>

<style>
.snakeContainer div:nth-child(even){
  display: flex;
  flex-direction: row-reverse;
  justify-content: flex-end;
}

.snakeContainer div:nth-child(odd){
  display: flex;
}
</style>