Achieving flexbox row-reverse in css grid

Question

After getting to grips with flexbox, I've started learning CSS grid.

Here's a simple flexbox grid that I've built before:

.container {
  width: 500px;
  max-width: 100%;
  margin: 0 auto;
}

.flex {
  display: flex;
  flex-flow: row wrap;
}

.col {
  padding: 24px;
  flex: 1;
}

.flex:nth-child(even) {
  flex-flow: row-reverse wrap;
  text-align: left;
}

img {
  height: auto;
  max-width: 100%;
}

<div class="container">

  <div class="flex">

    <div class="col">
      <h2>I'm A Title</h2>
      <p>Here's some copy.</p>
    </div>

    <div class="col">
      <img src="https://hackernoon.com/hn-images/1*mONNI1lG9VuiqovpnYqicA.jpeg">
    </div>

  </div><!-- .flex -->

  <div class="flex">

    <div class="col">
      <h2>I'm A Title</h2>
      <p>Here's some copy.</p>
    </div>

    <div class="col">
      <img src="https://hackernoon.com/hn-images/1*mONNI1lG9VuiqovpnYqicA.jpeg">
    </div>

  </div><!-- .flex -->
  
   <div class="flex">

    <div class="col">
      <h2>I'm A Title</h2>
      <p>Here's some copy.</p>
    </div>

    <div class="col">
      <img src="https://hackernoon.com/hn-images/1*mONNI1lG9VuiqovpnYqicA.jpeg">
    </div>

  </div><!-- .flex -->

</div><!-- .container -->

As you can see, the image alternates using flex-flow: row-reverse wrap;.

My question: Is it possible to do the same thing using CSS grid? How would I achieve this?

Here's how it's looking in CSS grid so far. Any ideas?

.container {
  width: 500px;
  max-width: 100%;
  margin: 0 auto;
}

.grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);	
}

.col {
  padding: 24px;
}

img {
  height: auto;
  max-width: 100%;
}

<div class="container">

  <div class="grid">

    <div class="col">
      <h2>I'm A Title</h2>
      <p>Here's some copy.</p>
    </div>

    <div class="col">
      <img src="https://hackernoon.com/hn-images/1*mONNI1lG9VuiqovpnYqicA.jpeg">
    </div>

  </div><!-- .grid -->

  <div class="grid">

    <div class="col">
      <h2>I'm A Title</h2>
      <p>Here's some copy.</p>
    </div>

    <div class="col">
      <img src="https://hackernoon.com/hn-images/1*mONNI1lG9VuiqovpnYqicA.jpeg">
    </div>

  </div><!-- .grid -->

   <div class="grid">

    <div class="col">
      <h2>I'm A Title</h2>
      <p>Here's some copy.</p>
    </div>

    <div class="col">
      <img src="https://hackernoon.com/hn-images/1*mONNI1lG9VuiqovpnYqicA.jpeg">
    </div>

  </div><!-- .grid -->

</div><!-- .container -->

Answer 1

You have 2 elements so simply change the order of one element.

.container {
  width: 500px;
  max-width: 100%;
  margin: 0 auto;
}

.grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);	
}

.col {
  padding: 24px;
}

img {
  height: auto;
  max-width: 100%;
}

.grid:nth-child(even) .col:last-child {
  order:-1;
}

<div class="container">

  <div class="grid">

    <div class="col">
      <h2>I'm A Title</h2>
      <p>Here's some copy.</p>
    </div>

    <div class="col">
      <img src="https://hackernoon.com/hn-images/1*mONNI1lG9VuiqovpnYqicA.jpeg">
    </div>

  </div><!-- .grid -->

  <div class="grid">

    <div class="col">
      <h2>I'm A Title</h2>
      <p>Here's some copy.</p>
    </div>

    <div class="col">
      <img src="https://hackernoon.com/hn-images/1*mONNI1lG9VuiqovpnYqicA.jpeg">
    </div>

  </div><!-- .grid -->

   <div class="grid">

    <div class="col">
      <h2>I'm A Title</h2>
      <p>Here's some copy.</p>
    </div>

    <div class="col">
      <img src="https://hackernoon.com/hn-images/1*mONNI1lG9VuiqovpnYqicA.jpeg">
    </div>

  </div><!-- .grid -->

</div><!-- .container -->

You can also do the same with flexbox:

.container {
  width: 500px;
  max-width: 100%;
  margin: 0 auto;
}

.grid {
  display: flex;
  flex-flow: row wrap;
}

.col {
  padding: 24px;
  flex: 1;
}

img {
  height: auto;
  max-width: 100%;
}

.grid:nth-child(even) .col:last-child {
  order:-1;
}

<div class="container">

  <div class="grid">

    <div class="col">
      <h2>I'm A Title</h2>
      <p>Here's some copy.</p>
    </div>

    <div class="col">
      <img src="https://hackernoon.com/hn-images/1*mONNI1lG9VuiqovpnYqicA.jpeg">
    </div>

  </div><!-- .grid -->

  <div class="grid">

    <div class="col">
      <h2>I'm A Title</h2>
      <p>Here's some copy.</p>
    </div>

    <div class="col">
      <img src="https://hackernoon.com/hn-images/1*mONNI1lG9VuiqovpnYqicA.jpeg">
    </div>

  </div><!-- .grid -->

   <div class="grid">

    <div class="col">
      <h2>I'm A Title</h2>
      <p>Here's some copy.</p>
    </div>

    <div class="col">
      <img src="https://hackernoon.com/hn-images/1*mONNI1lG9VuiqovpnYqicA.jpeg">
    </div>

  </div><!-- .grid -->

</div><!-- .container -->