How to make new divs alternate rows in CSS?

Question

I feel really silly right now as I'm sure the solution is quite simple, however I'm wondering how to make divs alternate rows so that I would have a dynamic layout that follows the rules like this:

1 3 5 7 9
2 4 6 8 10

If my html were to look like:

<div 1>
<div 2>
<div 3>
<div 4>

etc.

`display: grid; grid-template-rows: 1fr 1fr; grid-auto-flow: column;` — Temani Afif, Nov 24 '22 at 22:26
@TemaniAFif Thank you! I was just missing the grid-auto-flow haha — , Nov 24 '22 at 22:27

score -1 · Answer 1 · answered Nov 24 '22 at 22:33

You can try something like this:

.container {
  display: flex;
  flex-direction: column;
  align-content: flex-start;
  flex-wrap: wrap;
  height: 50px;
}

<div class="container">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
</div>

And for sure you can change the height depending on your needs.

How to make new divs alternate rows in CSS?

1 Answers1