响应式网格，图像保持宽高比

Question

我正在尝试创建一个类似于所附图表的布局。 （左边是桌面版，右边是移动版。）

• 布局应该是响应式的（理想情况下是流畅的，但不是必需的）。
• 每个图像（由灰色框表示）应保持与图中所示相同的纵横比。
• 在移动设备上，标题将图像网格的左侧和右侧分开。 （我们将左侧的网格称为 A 组，将右侧的网格称为 B 组。A 组在移动设备上位于顶部，B 组位于底部。）

我真的很接近实现它，但感觉很老套。它需要一些神奇的数字（我认为是因为设计师没有使用严格的网格）。我遇到的困难是 1) 使其响应，同时保持图像对齐并具有正确的宽高比，以及 2) 在移动设备上，将图像网格分割在标题文本的上方和下方。

这是代码：

img {
  vertical-align: middle;
  max-width: 100%;
  display: inline-block;
}

.container {
  max-width: 1200px;
  padding-left: 20px;
  padding-right: 20px;
  text-decoration: none;
  margin-left: auto;
  margin-right: auto;
  display: block;
}

.main-grid {
  grid-column-gap: 14px;
  grid-row-gap: 50px;
  flex-flow: wrap;
}

.flex-example {
  grid-column-gap: 14px;
  display: flex;
}

.grid-left {
  grid-row-gap: 14px;
  flex-flow: column;
  flex: 6 1 0;
  align-items: flex-start;
  display: flex;
}

.grid-left-row {
  grid-column-gap: 14px;
  justify-content: space-between;
  align-items: flex-start;
  display: flex;
}

.grid-image {
  object-fit: cover;
  height: 100%;
}

.grid-right {
  grid-column-gap: 14px;
  flex-flow: row;
  flex: 10 1 0;
  justify-content: flex-start;
  align-items: flex-start;
  display: flex;
}

.grid-right-stack {
  grid-row-gap: 14px;
  flex-flow: column;
  display: flex;
}

<div class="container">
  <div class="main-grid">
    <h1 class="heading-m">This is a headline</h1>
    <div class="flex-example">
      <div class="grid-left">
        <div class="grid-left-row">
          <div class="image-container-square grid-half">
            <img src="https://assets-global.website-files.com/65d8cdba8e3b7326e7abc6e9/66328af024c4be478f2d3258_Mask%20group-5.jpg" class="grid-image" />
          </div>
          <div class="image-container-square grid-half">
            <img src="https://assets-global.website-files.com/65d8cdba8e3b7326e7abc6e9/66328aef15baba56a36a8748_Mask%20group-2.jpg" class="grid-image" />
          </div>
        </div>
        <div class="image-container-2-1">
          <img src="https://assets-global.website-files.com/65d8cdba8e3b7326e7abc6e9/66328aef0c1d9ef00ec9bfbf_Mask%20group-1.jpg" class="grid-image" />
        </div>
      </div>
      <div class="grid-right">
        <div class="image-container-square grid-right-main">
          <img src="https://assets-global.website-files.com/65d8cdba8e3b7326e7abc6e9/66328af070c0dca8c5385992_Mask%20group.jpg" class="grid-image" />
        </div>
        <div class="grid-right-stack">
          <div class="image-container-4-5">
            <img src="https://assets-global.website-files.com/65d8cdba8e3b7326e7abc6e9/66328aeff12d10f6134c0cd7_Mask%20group-3.jpg" class="grid-image" />
          </div>
          <div class="image-container-4-5">
            <img src="https://assets-global.website-files.com/65d8cdba8e3b7326e7abc6e9/66328aef23576032c93e1b1a_Mask%20group-4.jpg" class="grid-image" />
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

感谢您的帮助！

Answer 1

假设您被困在排列移动的主要 3 个块上，您可以使用

order

CSS 来解决这个问题。

这对于您当前的 HTML 来说是不可能的，因为您已经嵌套了 2 个需要在自己的 div 内移动的块，而不是让所有 3 个块处于同一级别。

也就是说，代替：

<h1 class="heading-m">This is a headline</h1>
<div class="flex-example">
    <div class="grid-left">left content</div>
    <div class="grid-right">right content</div>
</div>

您需要将标题作为弹性项目之一放入弹性盒内，如下所示：

.flex-example {
    display: flex;
    flex-wrap: wrap;
}
.heading-m {
    flex: 1 0 100%;
}
.grid-left {
    flex-grow: 1;
}
.grid-right {
    flex-grow: 1;
}
.flex-example > * {
    background: #c0c0c0;
    border: 2px solid #505050;
}
@media (max-width: 768px) {
    .heading-m {
        order: 1;
    }
    .grid-left {
        order: 0;
    }
    .grid-right {
        order: 2;
    }
}

<div class="flex-example">
    <h1 class="heading-m">This is a headline</h1>
    <div class="grid-left">left content</div>
    <div class="grid-right">right content</div>
</div>

对此的基本解释是，您的默认设置将元素堆叠在行中。元素不断增长以填充空间，并且标题始终为 100%，而其他 2 个元素则共享。

一旦屏幕低于 768px（在本例中），元素就会重新排序，以便

.grid-left

排在第一位。在这种情况下，您不需要告诉它们占据 100% 的空间，因为占据它们中间空间的元素会迫使这种情况发生。

只要您再次使用 Flexbox 来排列左右项目中的内容，所有内容都会根据您的需要适当调整大小。