响应式Grid布局屏幕缩小时垂直溢出问题求助

核心问题分析 #

当前布局的问题主要源于两点：

• gridWrapper 使用固定的 grid-template-rows: 1fr 1fr 1fr 1fr，但父容器 gridContainer 缺乏明确的高度基准，小屏幕下百分比内边距会导致容器高度计算失衡，最终引发行高度被过度压缩。
• 未针对小屏幕做响应式列数适配，3列布局在窄屏中内容拥挤，进而出现垂直溢出。

修复方案 #

以下是修改后的完整代码，同时加入了响应式适配逻辑：

CSS 代码

.gridContainer{
    background: #101010;
    width: 100%;
    padding: 10% 5%;
    /* 确保padding不额外增加容器宽度 */
    box-sizing: border-box;
    /* 限制最大宽度，避免超大屏幕布局过散 */
    max-width: 1400px;
    margin: 0 auto;
}
.gridWrapper{
    display: grid;
    /* 自动适配列数，最小列宽280px */
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    /* 行高自适应，同时保证最小高度 */
    grid-auto-rows: minmax(200px, auto);
    gap: 2%;
}
#mem1{
    grid-row: span 2;
}
#mem4{
    grid-column: 2;
    grid-row: 2;
}
#mem5{
    grid-row: span 2;
}
#mem7{
    grid-row: span 2;
}
.mem{
    padding: 2%;
    border: solid 1px white;
    box-sizing: border-box;
    /* 确保容器正确包裹图片 */
    display: flex;
}
.mem > img{
    width: 100%;
    height: auto;
    /* 保持图片比例并填满容器 */
    object-fit: cover;
    flex: 1;
}

/* 小屏幕下修正特殊项的网格位置，避免布局错乱 */
@media (max-width: 768px) {
    #mem4{
        grid-column: auto;
        grid-row: auto;
    }
}

HTML 代码（保持原结构即可）

<div class="gridContainer">
    <div class="gridWrapper">
        <div class="mem" id="mem1"><img src="images/concrete/concrete-tall-1.jpg"></div>
        <div class="mem" id="mem2"><img src="images/concrete/concrete-wide-1.jpg"></div>
        <div class="mem" id="mem3"><img src="images/concrete/concrete-wide-2.jpg"></div>
        <div class="mem" id="mem4"><img src="images/concrete/concrete-wide-3.jpg"></div>
        <div class="mem" id="mem5"><img src="images/concrete/concrete-tall-2.jpg"></div>
        <div class="mem" id="mem6"><img src="images/concrete/concrete-wide-4.jpg"></div>
        <div class="mem" id="mem7"><img src="images/concrete/concrete-tall-3.jpg"></div>
        <div class="mem" id="mem8"><img src="images/concrete/concrete-wide-5.jpg"></div>
        <div class="mem" id="mem9"><img src="images/concrete/concrete-wide-6.jpg"></div>
    </div>
</div>

关键修改说明 #

• 响应式列数：用 repeat(auto-fit, minmax(280px, 1fr)) 替代固定3列，小屏幕下会自动减少列数，避免内容拥挤。
• 行高自适应：移除固定的 grid-template-rows，改用 grid-auto-rows: minmax(200px, auto)，让行高根据内容自动调整，同时保证最小高度。
• 盒模型修正：给 gridContainer 和 .mem 添加 box-sizing: border-box，确保padding不会额外增加容器尺寸，避免布局偏移。
• 图片适配优化：将图片的 height:100% 改为 height:auto，配合flex布局让图片保持比例的同时填满容器，避免拉伸或溢出。
• 小屏幕适配：在768px以下屏幕重置#mem4的网格位置，避免因列数减少导致的布局错乱。

内容的提问来源于stack exchange，提问作者Elie El Khoury