CSS Grid中图片溢出问题如何解决？

问题分析 #

你的代码存在几个核心问题导致图片溢出：

• grid-template-columns 语法错误：repeat(1fr, 1fr) 不符合规范，正确写法应为 repeat(2, 1fr)（定义2列，每列宽度占1份可用空间）
• 间距属性冲突：grid-column-gap: 90rem 被后续的 gap: 6rem 覆盖，且90rem的间距过大，远超正常布局需求
• 图片margin引发尺寸溢出：width: 100% 加上左右margin，会让图片实际宽度超出网格项分配的空间
• 未对根元素和容器设置溢出约束，导致页面出现滚动条

修正后的代码 #

HTML（无需修改）

<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>

CSS

/* 重置根元素和body默认样式，消除滚动条基础 */
html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

.main-container{
    display: grid;
    /* 正确定义2列网格布局 */
    grid-template-columns: repeat(2, 1fr);
    /* 统一设置网格行列间距 */
    gap: 6rem;
    width: 100%;
    height: 100%;
    /* 用容器padding替代图片margin，避免尺寸溢出 */
    padding: 20px;
    box-sizing: border-box;
}

.main-container img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* 移除图片的margin，避免额外尺寸占用 */
}

关键调整说明 #

1. 修正grid-template-columns语法，确保生成预期的2列3行布局
2. 移除图片的margin，改用容器的padding+box-sizing: border-box控制内边距，避免图片宽度超出网格项
3. 给html和body设置overflow:hidden，直接消除页面滚动条
4. 用gap统一管理网格间距，避免属性冲突

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