交替使用CSS Grid列和移动视图

Question

交替使用CSS Grid列和移动视图

htmlcssflexboxcss-grid

3

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

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

每一行都会交替出现描述和图像，因此在第二行，第一列中有一张图片，在第二列中有一个描述。请查看附带的图片以查看目前的工作情况（注意：我重新调整了图片大小以便于截屏）。

CSS Grid的移动版本是单列的。当我在移动版本中显示相同的内容时，布局不再起作用。由于我的布局由HTML内容决定（可能是一件坏事，我知道），标题将不总是显示在图像之上，这正是我想要的。请参见附件以查看问题。

我认为解决这个问题的答案在于使用flex-direction: row-reverse;，然而，很难找到一些好的示例（也许是我搜索方式不对）。我能找到的最好的Codepen使用flex-direction实现了我想要的效果，但它并没有将描述和图像漂亮地放置在一个CSS Grid框中，所以在调整浏览器大小时，图像会重叠文字...这可能是由于我对Flexbox的使用知识不足（还在学习）。

您能帮我找出如何正确创建交替的两列项目列表，当在单列列表中时也可以正确显示文本和图像吗？

我更喜欢使用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;
}

- Bill

2个回答

0

这对我有帮助：例如，如果你想在屏幕宽度小于1200px时反转列，那么在父级div中，使用以下代码代替：

@media (max-width:1200px) {
.services-area {
display: flex;
flex-flow: column-reverse;
}
}

- Alalade Samuel

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- pecus · Accepted Answer

为了提高可访问性和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;
}