CSS 网格 - 每隔一张卡片翻转一次（行）

Question

我正在构建一个带有 CSS 网格的服务页面，我想每隔一行翻转一次。所以第二行左边是图片，右边是文字。第三个应该和第一个一样，以此类推。什么是最简单的解决方案？

谢谢！

.servicios-container {}

.servicios-card {
  margin: 100px 200px;
  display: grid;
  align-items: center;
  grid-template-columns: 1.5fr 1fr;
  grid-gap: 140px;
}

.servicios-card img {
  width: 100%;
  border-radius: 50px;
}

.servicios-texto h2 {
  font-size: 46px;
}

.servicios-texto p {
  font-size: 20px;
}

<div class="servicios-container">
  <div class="servicios-card">
    <div class="servicios-texto">
      <h2>Edición de audio</h2>
      <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Dignissimos laboriosam, nobis quidem eius sit excepturi, minima modi cum, incidunt quo repellat odio adipisci reiciendis quis earum aliquam optio consectetur fugiat.</p>
      <form action="#">
        <button class="contacto-btn m-top" type="submit">Mas información</button>
      </form>
    </div>
    <img src="https://placeimg.com/450/300/tech" />
  </div>

  <!-- this card should have the img on the left-side -->
  <div class="servicios-card">
    <img src="img\Estudio-de-grabación-servicios-Solistas.jpg" alt="">
  </div>

  <!-- this card should have the img on the right-side as the first card -->
  <div class="servicios-card">
    <img src="img\Estudio-de-grabación-servicios-Video.jpg" alt="">
  </div>
</div>

Answer 1

使用nth-child(even) pseudo-selector定位所有偶数元素并更新其children

的列

.servicios-card:nth-child(even) .servicios-texto {
  grid-column: 2;
}

.servicios-card:nth-child(even) img {
  grid-column: 1;
  grid-row: 1;
}

在你的情况下，因为你有不均匀的列，你还必须为每个偶数元素更新你的网格

.servicios-card:nth-child(even) {
    grid-template-columns: 1fr 1.5fr;
}

编辑：有一个更聪明的解决方案。

使用网格模板区域会使它更干净

将您的包装器元素更新为类似这样的东西

.servicios-card {
     margin: 100px 200px;
    display: grid;
    align-items: center;
    grid-template-columns: 1.5fr 1fr;
    grid-template-areas:
      "img text";
    grid-gap: 140px;
}

在这里，您要为 child 元素创建区域，因此您只需切换每个偶数元素的区域和列大小。

将 children 分配给您的网格区域

.servicios-card img {
  grid-area: img;
}

.servicios-texto {
  grid-area: text;
}

然后，以偶数为目标施展魔法。

.servicios-card:nth-child(even) {
  grid-template-areas:
    "text img";
  grid-template-columns: 1fr 1.5fr
}

CSS 网格 - 每隔一张卡片翻转一次（行）

CSS Grid - Flip every other card (rows)

html

css

layout

flip

css-grid