使用 CSS 网格和 flexbox 定位图像答案

【问题标题】：Image positioning with CSS grid and flexbox使用 CSS 网格和 flexbox 定位图像
【发布时间】：2020-10-22 04:38:42
【问题描述】：

what my image gallery is like at the moment

如您所见，我在网格系统中有 2 张图像占据了 50% 的宽度。我遇到的问题是我想让下面的第三个图像占据这两个图像下方宽度的 100%，但仍然在网格中，所以它与其他两个图像一起缩小，所以我该怎么做呢？我的 HTML 代码是：

<div class="images">
  <img
    src="protest_2.jpg"
    alt="a protest for black lives matter with their faces blurred"
  />
  <img src="protest_1.jpg" alt="a climate strike with their faces blurred" />
</div>

我的css代码是：

.images img {
    object-fit: cover;
    height: 300px;
    width: 100%;
    border-radius: 3px;
    box-shadow: 0 2px 20px rgba(0, 0, 0, .25);
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
}
.images {
    /* CHANGE TO GRID */
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    justify-content: space-between;
    grid-gap: 20px;
    width: 940px;
    max-width: 100%;
    margin: auto;
}
@media (max-width: 1000px) {
    .images {
        grid-template-columns: 1fr;
    }
}

【问题讨论】：

标签： html css flexbox grid

【解决方案1】：

将前两个图像的grid-row: 设置为2，并将最后一个图像设置为3。同一行的元素会对齐。

【讨论】：

【解决方案2】：

您正在寻找跨越 2 列的图像，因此请使用 nth-child 选择第三张图像并使用 grid-column-end：

.images img:nth-child(3) {
  grid-column-end: span 2;
}

或者，如果您不想使用nth-child，您可以向其中添加一个类并以这种方式选择它。

【讨论】：