时间戳

首页 > 解决方案 > 在 CSS 网格中实现 flexbox 行反转

html - 在 CSS 网格中实现 flexbox 行反转

问题描述

在掌握了 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 -->

标签： htmlcssflexboxcss-grid

解决方案

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

推荐阅读