使用CSS grid布局展示图片显示异常，如何实现规整带间距的图片网格？

• 网格容器单列宽度设置为200px，但图片固定宽度250px，尺寸大于列宽直接撑爆容器，导致间距失效、内容溢出
• 包裹图片的.grid网格项未设置尺寸限制和溢出规则，无法约束内部图片的展示范围

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图片网格</title>
    <style>
        .container {
            display: grid;
            grid-template-columns: repeat(5, minmax(200px, 1fr));
            row-gap: 10px;
            column-gap: 10px;
            padding: 10px;
        }
        .grid {
            width: 100%;
            aspect-ratio: 1/1;
            overflow: hidden;
        }
        img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.3s ease;
        }
        img:hover {
            transform: scale(1.1);
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="grid">
            <img src="https://photo-cms-plo.zadn.vn/w800/Uploaded/2021/wopsvun/2020_09_03/doaremon_wdyw.jpg" />
        </div>
        <div class="grid">
            <img src="https://photo-cms-plo.zadn.vn/w800/Uploaded/2021/wopsvun/2020_09_03/doaremon_wdyw.jpg" />
        </div>
        <div class="grid">
            <img src="https://photo-cms-plo.zadn.vn/w800/Uploaded/2021/wopsvun/2020_09_03/doaremon_wdyw.jpg" />
        </div>
        <div class="grid">
            <img src="https://photo-cms-plo.zadn.vn/w800/Uploaded/2021/wopsvun/2020_09_03/doaremon_wdyw.jpg" />
        </div>
        <div class="grid">
            <img src="https://photo-cms-plo.zadn.vn/w800/Uploaded/2021/wopsvun/2020_09_03/doaremon_wdyw.jpg" />
        </div>
        <div class="grid">
            <img src="https://photo-cms-plo.zadn.vn/w800/Uploaded/2021/wopsvun/2020_09_03/doaremon_wdyw.jpg" />
        </div>
        <div class="grid">
            <img src="https://photo-cms-plo.zadn.vn/w800/Uploaded/2021/wopsvun/2020_09_03/doaremon_wdyw.jpg" />
        </div>
        <div class="grid">
            <img src="https://photo-cms-plo.zadn.vn/w800/Uploaded/2021/wopsvun/2020_09_03/doaremon_wdyw.jpg" />
        </div>
        <div class="grid">
            <img src="https://photo-cms-plo.zadn.vn/w800/Uploaded/2021/wopsvun/2020_09_03/doaremon_wdyw.jpg" />
        </div>
        <div class="grid">
            <img src="https://photo-cms-plo.zadn.vn/w800/Uploaded/2021/wopsvun/2020_09_03/doaremon_wdyw.jpg" />
        </div>
        <div class="grid">
            <img src="https://photo-cms-plo.zadn.vn/w800/Uploaded/2021/wopsvun/2020_09_03/doaremon_wdyw.jpg" />
        </div>
        <div class="grid">
            <img src="https://photo-cms-plo.zadn.vn/w800/Uploaded/2021/wopsvun/2020_09_03/doaremon_wdyw.jpg" />
        </div>
        <div class="grid">
            <img src="https://photo-cms-plo.zadn.vn/w800/Uploaded/2021/wopsvun/2020_09_03/doaremon_wdyw.jpg" />
        </div>
    </div>
</body>
</html>

• 移除图片固定250px尺寸，改为宽高100%适配父容器，object-fit: cover自动裁剪图片保证比例不变，不会变形
• 给.grid网格项添加aspect-ratio: 1/1，强制所有网格项为正方形，保证所有图片展示尺寸统一
• 调整网格列规则为repeat(5, minmax(200px, 1fr))，保留5列布局的同时适配不同屏幕宽度，小屏幕下不会超出视口
• 新增溢出隐藏和hover放大效果，进一步提升视觉体验

内容的提问来源于stack exchange，提问作者ni ni