How do I change the direction of every other "row" in a wrapped row flex container?

Question

I'm looking for a way to display an ordered list of components in an "S" pattern (where you can trace the start to the end of the list without lifting up your pen, for example).

This is what the end goal looks like:

For the life of me, I can't come up with a way to do this. If it was a column with a set number of rows, I could do something like :nth-child(even) { flex-direction: row-reverse; } as this post suggests.

Here is the basic markup:

.flex-container {
  display: flex;
  flex-flow: wrap;
  place-content: flex-start;
  align-items: flex-start;
  flex: 1 1 320px;
}

.flex-item {
  flex: 0 0 calc(33.33% - 10px);
  /* Adjust the width as needed */
  margin: 5px;
  text-align: center;
  padding: 20px;
  background-color: #ccc;
  border: 1px solid #999;
}


/* This doesn't work */

.flex-container:nth-child(even) {
  flex-direction: row-reverse;
}

<div class="flex-container">
  <div class="flex-item">1</div>
  <div class="flex-item">2</div>
  <div class="flex-item">3</div>
  <div class="flex-item">4</div>
  <div class="flex-item">5</div>
  <div class="flex-item">6</div>
  <div class="flex-item">7</div>
  <div class="flex-item">8</div>
  <div class="flex-item">9</div>
  <!-- this list is dynamic! -->
</div>

Here is a jfiddle with the basic setup I have in a production application. One thing to keep in mind is this is coming from a 3rd party application (Inductive Automation's Ignition Perspective), so I pretty much need to do things this way, as I'll have a dynamic number of components in the list.

Answer 1

Doable using CSS grid if you know the number of columns. I have a (long) article detailing such techniques that worth reading in case you need more complex configuration: https://css-tricks.com/exploring-css-grids-implicit-grid-and-auto-placement-powers/#grid-patterns

For 2 columns

.container {
  display: grid;
  grid-auto-flow: dense;
  gap: 5px;
  padding: 5px;
}

.item:nth-child(4n + 4) {
  grid-column: 1;
}
.item:nth-child(4n + 3) {
  grid-column: 2;
}

.item {
  text-align: center;
  padding: 20px;
  background-color: #ccc;
  border: 1px solid #999;
}

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
  <div class="item">7</div>
  <div class="item">8</div>
  <div class="item">9</div>
  <div class="item">10</div>
  <div class="item">11</div>
  <div class="item">12</div>
  <div class="item">13</div>
  <div class="item">14</div>
  <!-- this list is dynamic! -->
</div>

And for 3 columns:

.container {
  display: grid;
  grid-auto-flow: dense;
  gap: 5px;
  padding: 5px;
}

.item:nth-child(6n + 6) {
  grid-column: 1;
}
.item:nth-child(6n + 5) {
  grid-column: 2;
}
.item:nth-child(6n + 4) {
  grid-column: 3;
}

.item {
  text-align: center;
  padding: 20px;
  background-color: #ccc;
  border: 1px solid #999;
}

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
  <div class="item">7</div>
  <div class="item">8</div>
  <div class="item">9</div>
  <div class="item">10</div>
  <div class="item">11</div>
  <div class="item">12</div>
  <div class="item">13</div>
  <div class="item">14</div>
  <!-- this list is dynamic! -->
</div>