CSS Grid布局#BG_1706588429585_78543网格项过宽问题排查请求

问题描述 #

我正在克隆一个网页，要求与原页面样式完全一致，采用CSS Grid实现布局。目前页面其他部分渲染正常，但左上角米色背景的网格项（ID：#BG_1706588429585_78543）宽度异常过宽，尝试手动设置宽度和调整样式均未解决问题，使用工具为Bluegriffon。

原因分析 #

1. 最外层网格容器缺少列规则定义：最外层容器#BG_1706588498800_39474仅设置了display: grid，但未定义grid-template-columns属性。CSS Grid在没有明确列规则时，会自动根据内容分配列宽，导致第一列（米色栏）没有宽度约束，被过度拉伸。
2. 左右栏布局不对称：右侧米色栏#BG_1706588715395_3375手动设置了固定宽度，但左侧栏未对应设置，且容器列规则缺失，无法形成对称的窄栏布局。

解决方案 #

给最外层网格容器添加明确的列模板定义，指定左侧米色栏的宽度与右侧栏保持一致，中间列自适应内容宽度。

修改步骤 #

1. 在最外层网格容器的CSS样式中添加grid-template-columns属性：

#BG_1706588498800_39474 {
  display: grid;
  grid-template-columns: 100px 1fr 100px; /* 左栏100px，中间列自适应，右栏100px */
}

2. 移除右侧栏的margin-left: -25px属性，避免布局偏移，保持左右栏对称。
3. 移除左侧栏空的background-image属性，简化代码。

修改后完整CSS代码 #

* {
  margin: 0;
  padding: 0;
}

#BG_1706588429585_78543 {
  -webkit-grid-area: 1 / 1 / span 3 / 1;
  grid-area: 1 / 1 / span 3 / 1;
  background-color: #e4e0db;
}

#BG_1706588472329_93639 {
  -webkit-grid-area: 4 / 1 / 4 / span 3;
  grid-area: 4 / 1 / 4 / span 3;
  height: 200px;
}

#BG_1706588498800_39474 {
  display: grid;
  grid-template-columns: 100px 1fr 100px; /* 添加列模板规则 */
}

#BG_1706588554856_71725 {
  -webkit-grid-area: 1 / 2 / 1 / 2;
  grid-area: 1 / 2 / 1 / 2;
  height: 280px;
  background-image: url("file:///C:/Users/j/Pictures/ancell%20website/ancell%20website/GettyImages-1189780516_edited.jpg");
  background-size: cover;
  background-attachment: scroll;
}

#BG_1706588630967_28266 {
  -webkit-grid-area: 2 / 2 / 2 / 2;
  grid-area: 2 / 2 / 2 / 2;
  width: 850px;
  height: 400px;
}

#BG_1706588646571_41284 {
  -webkit-grid-area: 3 / 2 / 3 / 2;
  grid-area: 3 / 2 / 3 / 2;
  height: 400px;
}

#BG_1706588715395_3375 {
  -webkit-grid-area: 1 / 3 / span 3 / 3;
  grid-area: 1 / 3 / span 3 / 3;
  background-color: #e4e0db;
  width: 100px;
}

.grid-container {
  display: grid;
  -webkit-grid-template-columns: 1fr 1fr;
  position: relative;
  grid-template-columns: 1fr 1fr;
}

.text-grid-item {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 65%;
  padding-left: 50px;
}

.image-grid-item {
  -webkit-grid-area: 1 / 2 / auto / auto;
  grid-area: 1 / 2 / auto / auto;
  height: 350px;
  width: 400px;
}

.text-below-item {
  position: absolute;
}

.image-below-item {
  -webkit-grid-area: 3 / 1 / auto / auto;
  grid-area: 3 / 1 / auto / auto;
  position: absolute;
}

.image-below-item img {
  max-width: 100%;
}

#BG_1706591150784_34941 {
  background-image: url("2240.jpg");
  background-size: cover;
}

#BG_1706591463850_20525 {
  height: 150px;
  z-index: 1;
}

#BG_1706593071441_16638 {
  position: absolute;
  height: 160px;
  width: 384px;
  background-image: url("stomatology1.jpg");
  background-size: cover;
}

#BG_1706592847477_13212 {
  position: absolute;
  width: 80px;
  height: 160px;
  background-image: url("stomatology2.jpg");
  background-size: cover;
}

#BG_1706593361074_42153 {
  font-family: "Bahnschrift";
  border-radius: 20px;
  border: 1px solid black;
  text-decoration: none;
}

#BG_1706672008070_78400 {
  margin: 40px;
}

#BG_1706591794079_12277 {
  padding-left: 50px;
  font-family: "Bahnschrift";
}

#BG_1706673085296_69899 {
  text-decoration: none;
  font-family: "Bahnschrift";
  border: 1px solid black;
  border-radius: 20px;
  color: white;
  background-color: #002121;
}

#BG_1706677155528_4879 {
  text-decoration: none;
}

效果说明 #

通过明确最外层网格容器的列规则，左侧米色栏宽度被固定为100px，与右侧栏保持对称，中间列自适应剩余空间，彻底解决了左侧网格项过宽的问题，页面布局与原页面一致。

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