在 CSS 网格中实现 flexbox 行反转答案

【问题标题】：Achieving flexbox row-reverse in css grid在 CSS 网格中实现 flexbox 行反转
【发布时间】：2019-12-14 10:45:14
【问题描述】：

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

这是我之前构建的一个简单的 flexbox 网格：

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

【问题讨论】：

标签： html css flexbox css-grid

【解决方案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 -->

【讨论】：

【解决方案2】：

让网格容器中的图像和文本每隔一秒切换一次。

.grid:nth-child(2n + 2) > div:first-child {
  grid-column: 2;
}

您还需要在网格容器上指定grid-auto-flow: dense，或在项目上指定grid-row: 1，以便项目呈现在同一行。

.grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-auto-flow: dense; /* tells grid to fill open space earlier in the grid */
}

.grid:nth-child(2n + 2)>div:first-child {
  grid-column: 2;
}

.col {
  padding: 24px;
}

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

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

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

【讨论】：