2

I have created a CSS grid with this specification:

I have two columns, each has a width of 50%.

.section-grid {
    display: grid;
    grid-template-rows: 1fr; 
    grid-template-columns: 50% 50%;
}
<div class="section-grid">
    <div>One</div>
    <div>Two</div>
    <div>Three</div>
    <div>Four</div>
</div>

How can I change the ordering with CSS grid so that divs three and four are displayed as if they have been changed? I will use it dynamically as I see two divs are one row and every second row should be changed.

I've created a pen for this: https://codepen.io/anon/pen/mpwKEw

And I would like to have the same markup as above, but it should be displayed as:

One | Two
Four | Three
Five | Six
Eight | Seven
TylerH
  • 20,799
  • 66
  • 75
  • 101
Torben
  • 5,388
  • 12
  • 46
  • 78
  • @Paulie_D I'have updated my description. – Torben Jan 02 '18 at 15:35
  • Possible duplicate of [How can I reorder my divs with CSS?](https://stackoverflow.com/questions/220273/how-can-i-reorder-my-divs-with-css) – TylerH Jan 02 '18 at 15:47
  • 1
    @TylerH Not dynamically though..right? This requires some *exact* properties. – Paulie_D Jan 02 '18 at 15:48
  • 1
    As far as I can tell, **you can't** in any dynamic form. If you can come up with a formula using "nth-child" you might have a chance but I can't think of one. – Paulie_D Jan 02 '18 at 15:57
  • @Paulie_D Eh, yeah if he wants to do it dynamically then he needs to use JavaScript. CSS is for styling what's on the page, not styling what "might be" on the page. – TylerH Jan 02 '18 at 15:59

1 Answers1

0

Try to use 'order' and div:nth-of-type():

.section-grid {
  display: grid;
  grid-template-rows: 1fr; 
  grid-template-columns: 50% 50%;
}

.section-grid div:nth-of-type(1) {
  order: 1;
}

.section-grid div:nth-of-type(2) {
  order: 2;
}

.section-grid div:nth-of-type(3) {
  order: 4;
}

.section-grid div:nth-of-type(4) {
  order: 3;
}
Bob van den Berg
  • 224
  • 2
  • 7