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

我正在用CSS网格构建一个服务页面，我想每隔一行翻转一次。 因此，第二行的左边是图像，右边是文本。第三个应该与第一个相同，依此类推。最简单的解决方案是什么

谢谢

链接到

.servicios容器{}
.服务卡{
利润率：100px 200px；
显示：网格；
对齐项目：居中；
网格模板柱：1.5fr 1fr；
栅极间距：140px；
}
.服务卡img{
宽度：100%；
边界半径：50px；
}
.servicios texto h2{
字体大小：46px；
}
.servicios texto p{
字体大小：20px；
}

音频法令
Lorem ipsum，dolor sit amet Concertetur Adipising Elite。劳工界的显贵们，除此之外，其他人都是少数，其中包括对自由选择权的尊重

信息时代

使用第n个子（偶数）伪选择器以所有偶数元素为目标，并更新其子元素的列

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

在这里，您正在为子元素创建区域，因此您只需在每个偶数元素上切换区域和列大小

将子对象指定给栅格区域

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

---

非常感谢你！工作完美。网格模板区域是一个了不起的解决方案。：）