How can I shuffle items to each other. Just using CSS

Mak0619 0
Viewed 34

I am trying to shuffle 1st item with 2nd item, 3rd item with 4th item and 5th item with 6th item...and so on.

Condition : Items are not fixed. It can be more than 6.

Existing scenario enter image description here

Expected Result enter image description here

flexbox css-selectors sass css html
1 Answers

If your items have the same height (as on your picture), you might shift even items upwards, odd ones downwards, and here you are:

li {
  border: solid 1px;
  margin: .25em 0;
  background: #6df;
}

li:nth-child(odd) {
  transform: translateY(calc(100% + .25em));
}

li:nth-child(even) {
  transform: translateY(calc(-100% - .25em));
}
<ol>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ol>

Kosh0
Related