CSS Grid布局高度问题排查：.portfolio__item-img-9布局失效

问题描述 #

目标为多列多行的网格布局，当前实现中，取消.portfolio__item-img-9的grid-row-start和grid-row-end注释后，其他元素的网格布局属性失效。调整父容器高度后问题仍未解决。

解决方案 #

关键修改点 #

1. 给父容器添加固定高度：让grid-template-rows中的1fr有明确计算基准，避免行高自适应混乱。
2. 给子元素添加box-sizing: border-box：避免边框占用额外空间导致网格错位。
3. 启用.portfolio__item-img-9的行属性：确保其占据正确的网格区域。

修改后的完整CSS代码 #

.portfolio__items{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(9, 1fr);
  gap: 15px;
  height: 900px; /* 固定父容器高度，可按需调整 */
}

.portfolio__item-img{
  background: #EDEDED;
  border: 12px solid rgba(237, 237, 237, 1);
  color: #EDEDED;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transition: all .5s;
  box-sizing: border-box; /* 让边框包含在元素尺寸内 */
}

.portfolio__item-img:hover{
  background: linear-gradient(0deg, rgba(36, 33, 33, 0.8), rgba(36, 33, 33, 0.8)), #EDEDED;
  border: 12px solid rgba(255, 255, 255, 0.15);
  color: #fff;
}

.portfolio__item-img-1, .portfolio__item-img-2{ grid-column-start: 1; }
.portfolio__item-img-3, .portfolio__item-img-4, .portfolio__item-img-5{ grid-column-start: 2; }
.portfolio__item-img-6, .portfolio__item-img-7{ grid-column-start: 3; }
.portfolio__item-img-8, .portfolio__item-img-9{ grid-column-start: 4; }

.portfolio__item-img-1{ grid-row-start: 1; grid-row-end: 5; }
.portfolio__item-img-2{ grid-row-start: 5; grid-row-end: 10; }
.portfolio__item-img-3{ grid-row-start: 1; grid-row-end: 4; }
.portfolio__item-img-4{ grid-row-start: 4; grid-row-end: 7; }
.portfolio__item-img-5{ grid-row-start: 7; grid-row-end: 10; }
.portfolio__item-img-6{ grid-row-start: 1; grid-row-end: 6; }
.portfolio__item-img-7{ grid-row-start: 6; grid-row-end: 10; }
.portfolio__item-img-8{ grid-row-start: 1; grid-row-end: 4; }
.portfolio__item-img-9{ grid-row-start: 4; grid-row-end: 10; } /* 取消注释 */

原因说明 #

• 父容器无固定高度时，1fr无法准确分配行高，子元素内容会撑开行高，导致整个网格布局错位。添加固定高度后，1fr会将父容器高度均匀分配给9行。
• 默认box-sizing: content-box下，元素的边框会额外增加元素总尺寸，超出网格分配的1fr空间，导致布局溢出。设置border-box后，边框被包含在元素的1fr尺寸内，不会破坏网格结构。

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