图像在 CSS 网格中溢出 - 如何修复？

Answer 1

使用

grid-template-columns: repeat(2, 1fr);

或

grid-template-columns: 1fr 1fr;

grid-template-columns: repeat(1fr, 1fr);

不正确。你会得到 Invalid property value 错误

要删除水平滚动，请删除

.main-container img

中的左右边距

• 如果您需要图像之间的空间，请使用

  gap

  属性。
• 如果您需要左侧或顶部的一些空间，请使用父容器的填充

同时从

width

中删除

height

和

.main-container

.main-container{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-column-gap: 90rem;
    gap: 6rem;
    padding: 20px;
}

.main-container img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}