Html Can'；在CSS中，无法使图像在网格中重复

我无法让我的图像重复。我希望桌面上有两列，手机上有一列。以前图像会挂在屏幕上，但现在它们不会重复。感谢所有愿意帮忙的人

 <div class="gridContainer">
            <img  width="100%" src="img.jpg"   >

            <img width="100%" src="img.jpg" >

            
            <img width="100%" src="img.jpg">
                
            <img width="100%" src="img.jpg" >
    </div>

---

使用媒体查询，移动屏幕使用1列，其他内容使用2列，如下所示：

.gridContainer{
对齐项目：居中；
左边距：10px；
右边距：10px；
显示：网格；
栅隙：10px；
}
@仅媒体屏幕
和（最大宽度：480px）{
.gridContainer{
网格模板列：1fr；
}
}
@仅媒体屏幕
和（最小宽度：481px）{
.gridContainer{
网格模板柱：1fr 1fr；
}
}
.gridContainer img{
最大宽度：600px；
高度：自动；
}

你所做的是无效的

justify content

是

flexbox

而不是

css grid

的属性。因此，它甚至不适用于css网格。然后

重复（自动填充，100%）也无效。
repeat
的正确用法是：repeat（列数/行数，宽度）；100%意味着只有一列不需要重复，因为它只是一个元素，并且已经跨越了整个宽度。不需要自动填充。我会用纯CSS解决这个问题：看，谢谢你，伙计，这帮了大忙。

.gridContainer
{
    align-items: center;
    margin-left: 10px;
    margin-right: 10px;
    display: grid;
    grid-template-columns: repeat(auto-fill, 100%);
    
    
    grid-gap: 10px;
    justify-content: space-evenly;
}

.gridContainer img
{
    max-width: 600px;
    height: auto;
}