在CSS网格中实现flexbox反向行

时间：2019-08-06 20:24:35

标签： html css flexbox css-grid

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

2 个答案:

答案 0 :(得分：2)

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

答案 1 :(得分：0)

每隔一个网格容器告诉图像和文本以切换侧面。

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

相关问题
最新问题