Есть ли способ змея / очереди потока элементов в сетке 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>