html - 交替 CSS 网格列和移动 View

Question

我正在使用 CSS Grid 为我的网站构建服务列表。整个网站网格中的一行被分成两个 CSS 网格列。

在第一行的第一列中，有一项服务的描述。在第二列中，有一个代表服务的图像。

每一行，描述和图像交替出现，所以在第二行第一列，有一个图像，在第二列，有一个描述。查看附加的图像以了解我到目前为止所做的工作(注意:我重新调整了图像的大小以使其更容易截取屏幕截图)。

CSS Grid 的移动版本是单列。当我在移动版本中显示相同的内容时，布局不再有效。由于我的布局是由 HTML 内容决定的(我知道这可能是件坏事)，标题不会总是显示在图像上方，这正是我想要的。请参阅附件以查看问题。

我相信解决这个问题的答案在于使用 flex-direction: row-reverse;然而，很难找到一些好的例子(也许我只是在寻找错误的方式)。我能找到的最好的 Codepen 使用 flex-direction 做我想做的事，但它不能很好地将描述放在一个 CSS 网格框中，将图像放在另一个 CSS 网格框中，因此在调整浏览器大小时，图像与文本重叠。这可能是由于我缺乏使用 Flexbox 的知识(仍在学习)。

你能帮我弄清楚如何正确创建一个交替的 2 列元素列表，在 1 列列表中也能正确显示文本和图像吗？

我更愿意留在 CSS Grid/Flexbox/无脚本世界中，但我很乐意接受其他想法。

非常感谢您提供的任何帮助!

HTML

<!-- Services area -->
<div class="services-area">
    <div class="services-text">
        <h3>This is service 1</h3>
    </div>
    <div class="services-div">
        <img class="services-image" src="images/home/home-agile-transformation.png" alt="Agile transformation image.">
    </div>
    <div class="services-div">
        <img class="services-image" src="images/home/home-agile-coaching.png" alt="Agile transformation image.">
    </div>
    <div class="services-text">
        <h3>This is service 2</h3>
    </div>
    <div class="services-text">
        <h3>This is service 3</h3>
    </div>
    <div class="services-div">
        <img class="services-image" src="images/home/home-agile-sw-implementation.png" alt="Agile transformation image.">
    </div>
</div>

CSS

// layout for services

// display a stacked grid <767 pixels
.services-area {
    grid-area: svcs;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto;

    @if $debug { background-color: $debugServicesArea; }
} 

// display a 2-column grid >768
@include for-size(full-size) {
    .services-area {
    grid-area: svcs;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto;
    margin-left: $gridMarginLeft;
    margin-right: $gridMarginRight;

    @if $debug { background-color: $debugServicesArea; }
    }
}

.services-text {
    display: grid;
    align-items: center;
    justify-content: center;
}

.services-image {
    max-width: 100%;
    height: auto;
}

Answer 1

对于可访问性问题和更好的 SEO，请按照逻辑顺序(标题、图像)进行标记。

在移动设备上，您根本不需要网格，使用 display:block对于容器。使用 grid-auto-flow: row dense按照行顺序尽可能密集地填充网格。这确保没有网格单元为空。
然后通过指定它们需要开始的列来替换标题元素。您可以使用 :nth-child()选择标题的兄弟选择器，从第 3 个开始，然后每 4 个( 4n - 1 表示 4 * 0 - 1 = -1(无效的兄弟，跳过)； 4 * 1 - 1 = 3 ； 4 * 2 - 1 = 7 ； ...)。

/* display a stacked grid <767 pixels */
.services-area {
    display: block;
} 

/* display a 2-column grid >768 */
@media (min-width: 768px) {
  .services-area {
      display: grid;
      grid-template-columns: 1fr 1fr;
      align-items: center;
      justify-content: center;
      grid-auto-flow: row dense;
  }
}

.services-area > :nth-child(4n - 1) {
  grid-column-start: 2;

}

.services-image {
    max-width: 100%;
    height: auto;
}