在css网格中实现flexbox行反转

Question

在掌握了 Flexbox 之后，我开始学习 CSS 网格。

这是我之前构建的一个简单的弹性盒网格：

.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 -->

正如您所看到的，图像交替使用flex-flow: row-reverse wrap;。

我的问题：是否可以使用 CSS 网格做同样的事情？我将如何实现这一目标？

这是到目前为止它在 CSS 网格中的样子。有任何想法吗？

.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

您有 2 个元素，因此只需更改其中一个元素的顺序即可。

.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 -->

您也可以对 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 -->