我創(chuàng)建了一個有兩列三行圖像和一個間隙的網(wǎng)格，但是右邊的圖像溢出來了。

<div class="main-container">
            <img src="./images/.jpg" alt="">
            <img src="./images/.jpg" alt="">
            <img src="./images/.jpg" alt="">
            <img src="./images/.jpg" alt="">
            <img src="./images/.jpg" alt="">
            <img src="./images/.jpg" alt="">
        </div>

.main-container{
    display: grid;
    grid-template-columns: repeat(1fr, 1fr);
    width: 100%;
    height: 100%;
    grid-column-gap: 90rem;
    gap: 6rem;
}

.main-container img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    margin-top: 20px;
    margin-right: 20px;
    margin-left: 20px;
}

我試著增加0px的最小高度和最小寬度，但還是溢出了，我希望它能阻止圖片溢出，并去掉滾動條。

使用網(wǎng)格-模板-列:重復(2，1fr)；或者網(wǎng)格-模板-列:1fr 1fr

網(wǎng)格-模板-列:重復(1fr，1fr)；不正確。你會得到無效的屬性值錯誤

若要刪除水平滾動，請刪除中的左右邊距。主集裝箱img

如果您需要圖像之間的空間，請使用gap屬性。 如果您需要從左側(cè)或頂部留出一些空間，請使用父容器的填充 下面這個例子是如何擺脫垂直和水平滾動條

body {
    height: calc(100vh - 20px * 2);
    margin: 0;
}

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

.main-container img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    overflow: auto;
}