使用 CSS 网格和 flexbox 定位图像

Posted 2023-03-05

【中文标题】使用 CSS 网格和 flexbox 定位图像

【英文标题】：Image positioning with CSS grid and 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"
    
  />
  <img src="protest_1.jpg"  />
</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;
    

【参考方案1】：

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

【参考方案2】：

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

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

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