5

Default behavior:

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

Desired behavior:

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

I've looked into the grid-auto-flow property as well as the direction property but there seems to be no workaround without resorting to javascript. Is there a way to achieve this with CSS?

George
  • 163
  • 1
  • 12
  • 1
    no there no *snake* feature on CSS for this – Temani Afif Jun 04 '19 at 20:39
  • There is a duplicate question dealing with the sameoffering some workarounds but I am not able to find it ... – Temani Afif Jun 04 '19 at 20:48
  • 1
    If it is about a four column grid, then nth-child is your friend https://codepen.io/gc-nomade/pen/zQXBwP , else, javascript will be required to set this method according to column's number on the fly – G-Cyrillus Jun 04 '19 at 20:54
  • You should really post more details and code in your question. As it stands, this question is very broad. – Michael Benjamin Jun 04 '19 at 21:57
  • Example code: https://jsfiddle.net/Birdlaw/doyr8vx2/. One workaround I was thinking of would involve selecting every other row and applying the `direction: rtl;` property. Unfortunately it looks like we can't yet select rows https://stackoverflow.com/q/46308048. – George Jun 05 '19 at 00:56

1 Answers1

3

You can use flex properties and nth-child selector

<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>
Brayan Garcia
  • 529
  • 3
  • 8