CSS display: grid; как поменять ячейки местами?

Question

[Артур Белан]

А как в grid можно поменять местами ячейки, вот есть 1 2 3 4 5 6, а мне надо что бы 1 3 2 5 4 6.
Такое можно реализовать?

Answer 1

[s_ilence_r]

. box1 {
order:0;
}
. box1 {
order:1;
}
и тд.

Comments

[Артур Белан]

Отличное решение! Но немного не то что надо.

Answer 2

[Артур Белан]

Я понял как это сделать!

<div class="wrapper">
   <div class="box1">1</div>
   <div class="box2">2</div>
   <div class="box3">3</div>
   <div class="box4">4</div>
   <div class="box5">5</div>
   <div class="box6">6</div>
</div>

.wrapper {
  display: grid;
}
.box1 {
  grid-column: 1;
  grid-row: 1;
}
.box2 {
   grid-column: 1;
   grid-row: 3;
}
.box3 {
   grid-column: 1;
   grid-row: 2;
}
.box4 {
   grid-column: 1;
   grid-row: 4;
}
.box5 {
   grid-column: 1;
   grid-row: 6;
}
.box6 {
   grid-column: 1;
   grid-row: 5;
}