Html 网格模板列未按预期工作。获取某些行中的空格

当我做

网格模板列时：重复（2，1fr）我在第一行得到两幅图像，然后在下一行我得到一幅图像，在同一帧的右边有一个空白，我应该在那里有第二幅图像。当
@media（最大宽度：990px）
为真时，如何修复该问题以在每帧中获得2个图像？除了上面解释的问题外，一切正常


img{
宽度：100%；
}
.卡片{
显示：网格；
网格模板列：重复（3，1fr）；
网格间距：1rem；
背景：#101010；
边缘底部：1rem；
}
.卡img{
高度：自动；
}
@介质（最大宽度：600px）{
.卡片{
显示器：flex；
}
}
@介质（最大宽度：990px）{
.卡片{
网格模板列：重复（2，1fr）；
}
}
问题似乎与HTML中的
标记重复。试试这个。如果您觉得答案有帮助，请评分并接受

<main class="container">
    <section class="card">
        <img src="https://picsum.photos/200/300" alt="" />
        <img src="https://picsum.photos/200/300" alt="" />
        <img src="https://picsum.photos/200/300" alt="" />

        <img src="https://picsum.photos/200/300" alt="" />
        <img src="https://picsum.photos/200/300" alt="" />
        <img src="https://picsum.photos/200/300" alt="" />
        
        <img src="https://picsum.photos/200/300" alt="" />
        <img src="https://picsum.photos/200/300" alt="" />
        
    </section>    
</main>

谢谢，我现在正在工作，我已经接受了答案，但根据评分，我不明白我该怎么做。也许你可以给我一些建议！