CSS Grid布局超出容器求助：如何让产品网格适配容器

问题根源分析 #

你的网格溢出容器主要有两个核心原因：

• <ol>标签默认带有padding-left，额外占用容器宽度，导致网格总宽度超出范围
• 未明确容器宽度适配规则，且未统一子元素盒模型，容易引发尺寸计算偏差

具体修复步骤 #

1. 重置列表默认样式：清除<ol>的默认内外边距，设置盒模型为border-box，确保容器尺寸计算准确
2. 容器宽度自适应：给<ol>添加width: 100%，让其在不超过max-width:1440px的前提下自适应父容器宽度
3. 统一子元素盒模型：给所有<li>设置box-sizing:border-box，避免内部内容或边框导致尺寸溢出

修改后的完整代码 #

/* 父容器修复 */
ol.products.list.items.product-items {
   display: grid;
   grid-template-rows: 1fr 1fr 1fr 1fr;
   grid-template-columns: 1fr 1fr 1fr 1fr;
   gap: 0px;
   height: 100%;
   max-width: 1440px;
   /* 新增修复样式 */
   width: 100%;
   padding: 0;
   margin: 0;
   box-sizing: border-box;
}

/* 子元素统一盒模型 */
li.item.product.product-item {
   box-sizing: border-box;
   list-style: none; /* 可选：移除默认列表标记，匹配设计图无序号效果 */
}

/* 原有子元素样式保留，简化缩写写法 */
li.item.product.product-item:nth-child(1) {
   background-color: #857E57; 
   grid-row: 1 / 2;
   grid-column: 1 / 2;
}
li.item.product.product-item:nth-child(2) {
   background-color: #95C985; 
   grid-row: 1 / 2;
   grid-column: 2 / 3;
}
li.item.product.product-item:nth-child(3) {
   background-color: #B5E85F; 
   grid-row: 1 / 3;
   grid-column: 3 / 5;
}
li.item.product.product-item:nth-child(4) {
   background-color: #A55867; 
   grid-row: 2 / 3;
   grid-column: 2 / 3;
}
li.item.product.product-item:nth-child(5) {
   background-color: #87F79D; 
   grid-row: 2 / 3;
   grid-column: 1 / 2;
}
li.item.product.product-item:nth-child(6) {
   background-color: #575FD7; 
   grid-row: 3 / 5;
   grid-column: 1 / 3;
}
li.item.product.product-item:nth-child(7) {
   background-color: #5C6C9D; 
   grid-row: 3 / 4;
   grid-column: 3 / 4;
}
li.item.product.product-item:nth-child(8) {
   background-color: #5F58AC; 
   grid-row: 3 / 4;
   grid-column: 4 / 5;
}
li.item.product.product-item:nth-child(9) {
   background-color: #B7E768; 
   grid-row: 4 / 5;
   grid-column: 3 / 4;
}
li.item.product.product-item:nth-child(10) {
   background-color: #75F656; 
   grid-row: 4 / 5;
   grid-column: 4 / 5;
}

额外优化说明 #

• 将grid-row-start/end和grid-column-start/end简化为grid-row和grid-column的缩写形式，代码更简洁易读
• 可选添加list-style: none移除列表默认序号，完全匹配设计图的无标记效果

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