已设置box-sizing:border-box但页面盒子尺寸不一致，如何解决？

你遇到的核心问题在于：

• Grid容器设置了固定行高300px，但.box仅设置了max-height: 800px，未强制固定高度；加上图片height: auto会根据原图比例自适应，不同比例的图片会撑出不同的盒子高度
• 文本描述.description的行数如果不一致，也会额外撑开盒子高度

具体解决方案 #

1. 强制.box占满Grid单元格高度
   给.box设置height: 100%，同时用flex布局控制内部元素的空间分配，确保图片和文本不会超出盒子范围。

2. 固定图片区域高度，保持比例不变形
   给图片设置固定高度，搭配object-fit属性保持图片比例，避免因原图尺寸差异导致盒子高度变化。

3. 控制文本区域的空间
   让文本区域填充盒子剩余空间，同时处理过长文本的显示，防止撑爆盒子。

修改后的CSS代码 #

.box {
  box-shadow: 0 0.75px 0.75px 0 #000;
  box-sizing: border-box;
  width: 100%;
  height: 100%; /* 强制占满Grid单元格高度 */
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 10px; /* 避免内容贴边，可选 */
}

img {
  width: 80%;
  height: 200px; /* 固定图片高度，可根据Grid行高调整 */
  object-fit: contain; /* 完整显示图片，保持比例 */
  border: 2px solid #000;
  margin-bottom: 10px; /* 图片与文本的间距 */
}

.description {
  font-family: "Red Hat Mono";
  font-size: 12px;
  font-weight: 300;
  letter-spacing: 0.15px;
  color: #000;
  text-align: left;
  flex: 1; /* 填充盒子剩余空间 */
  overflow-y: auto; /* 文本过长时显示滚动条，也可换成overflow: hidden隐藏 */
  margin: 0 10px 10px;
}

main {
  display: grid;
  grid-template-columns: 350px 350px;
  grid-template-rows: repeat(2, 300px);
  gap: 40px;
  grid-auto-rows: 300px;
  grid-auto-flow: row dense;
  margin: 40px 0;
  justify-content: center;
  align-items: stretch;
}

补充说明 #

• object-fit可根据需求调整：cover会裁剪图片填满区域，contain会完整显示图片（可能留空白）
• 若不想固定图片高度，可将图片的height换成flex: 0 0 auto，同时给.box设置overflow: hidden，但固定高度更能保证盒子尺寸完全一致

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