How do arrange divs into two rows of three columns, separated by even vs odd children?

Question

I have a parent div with 6 children divs as follows

<div class="work-wrap">
   <div class="work-item">1</div>
   <div class="work-item">2</div>
   <div class="work-item">3</div>
   <div class="work-item">4</div>
   <div class="work-item">5</div>
   <div class="work-item">6</div>
</div>

I want to have a result like this

2 4 6

1 3 5

Use `nth-child(even)` and `nth-child(odd)` to select the different divs; and then just style them up how you wish. — MattHamer5, Oct 10 '19 at 14:49
What have you tried, if anything? Do you have any constraints? Libraries you're already using? — TylerH, Oct 10 '19 at 14:51
Closing this as a duplicate - though to be clear it takes *both* of the targets I listed to fully answer this one. — TylerH, Oct 10 '19 at 14:58
@TylerH This is definitely not a duplicate. Firstly, the second link is not the result though it shows how to split it, but the 1st link , there is no right answer at all and the bounty awarded answer is using `display: table`. I think you should re-consider this and open up this question for people to give a direct answer for this question. — Gosi, Oct 10 '19 at 15:04
@Gosi The bounty awarded answer is only one answer among *twenty-three* answers. Be sure to read all answers when looking at duplicate targets. As for reopening this -- there's no need, because it *is* a duplicate, and it already has answers, anyway. — TylerH, Oct 10 '19 at 15:15

score 5 · Accepted Answer · answered Oct 10 '19 at 14:50

5

You can use a flexbox and change the order of the :nth-child(odd) items:

.work-wrap {
  display: flex;
  flex-wrap: wrap;
}

.work-item {
  width: 33%;
}

.work-item:nth-child(odd) {
  order: 1;
}

<div class="work-wrap">
  <div class="work-item">1</div>
  <div class="work-item">2</div>
  <div class="work-item">3</div>
  <div class="work-item">4</div>
  <div class="work-item">5</div>
  <div class="work-item">6</div>
</div>

answered Oct 10 '19 at 14:50

Ori Drori

183,571
29
224
209

when I tried to implement this in my actual code, it forms just a single column instead of 3 columns – Payne Oct 10 '19 at 15:12
What is the width of the container? – Ori Drori Oct 10 '19 at 15:14
I set it to 100% – Payne Oct 10 '19 at 15:15
Thanks, I added flex-direction: row – Payne Oct 10 '19 at 15:20

Christian Vincenzo Traina · Answer 2 · 2019-10-10T14:52:52.463

You can leverage on order property in flex layouts:

.work-wrap {
  display: flex;
  width: 300px;
  flex-wrap: wrap;
}

.work-item:nth-child(2) {
  order: 1;
}

.work-item:nth-child(4) {
  order: 2;
}

.work-item:nth-child(6) {
  order: 3;
}

.work-item:nth-child(1) {
  order: 4;
}

.work-item:nth-child(3) {
  order: 5;
}

.work-item:nth-child(5) {
  order: 6;
}

.work-item {
  width: 80px;
  height: 20px;
  border: solid 1px gray;
  text-align: center;
}

<div class="work-wrap">
   <div class="work-item">1</div>
   <div class="work-item">2</div>
   <div class="work-item">3</div>
   <div class="work-item">4</div>
   <div class="work-item">5</div>
   <div class="work-item">6</div>
</div>

You have done a great job. Thanks – Payne Oct 10 '19 at 15:16 — Payne, Oct 10 '19 at 15:16

score 1 · Answer 3 · answered Oct 10 '19 at 14:56

1

You can use :nth-child() pseudo-class with flex-box layout, for example:

.work-wrap {
  width: 300px;
  display: flex;
  flex-wrap: wrap;
}
.work-item {
  order: 2;
  flex: 1 1 30%;
}
.work-item:nth-child(2n) {
  order: 1;
}

answered Oct 10 '19 at 14:56

imalov

111
6

How do arrange divs into two rows of three columns, separated by even vs odd children?

2 4 6

3 Answers3