为何Grid项目无法跨多列？box-two跨列失效问题求助

问题根源 #

你遇到的问题主要来自三个细节：

1. 图片固定宽度未填满容器：img设置了固定的10rem宽度，即便box-two跨列成功，图片也只会显示原宽度，视觉上看不出跨列效果
2. Grid行定义语法错误：grid-template-rows: repeat(auto, 10rem);里的auto是无效参数，浏览器会忽略这个属性，可能导致布局计算异常
3. 固定列宽导致布局不直观：使用固定10rem列宽时，大屏幕下Grid容器会留白，跨列元素的宽度变化不明显

修正后的代码 #

CSS部分

.container {
  display: grid;
  grid-auto-rows: 10rem; /* 替换错误的repeat(auto, 10rem)，自动生成10rem高的行 */
  grid-template-columns: repeat(1, 1fr); /* 用fr单位让列填满容器 */
  gap: 10px;
}

img {
  width: 100%; /* 图片宽度填满父容器 */
  height: 100%; /* 图片高度填满父容器 */
  object-fit: cover; /* 保持图片比例，避免拉伸变形 */
}

@media screen and (min-width:768px) {
  .container {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media screen and (min-width:1024px) {
  .container {
    grid-template-columns: repeat(3, 1fr);
  }
  .box-two {
    grid-column: 2 / -1; /* 从第2列开始，到最后一列结束，适配3列布局 */
    /* 也可以用grid-column: span 2; 效果一致，起始列是2，跨2列对应3列的结束线 */
  }
}

HTML部分（无需修改）

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="css/style.css">
</head>
<body>
  <div class="container">
    <div class="box">
      <img src="css/images/blackberries.jpg" alt="blackberries">
    </div>
    <div class="box box-two">
      <img src="css/images/brunch.jpg" alt="brunch">
    </div>
    <div class="box">
      <img src="css/images/utensils.jpg" alt=" cooking utensils">
    </div>
    <div class="box">
      <img src="css/images/blackberries.jpg" alt="blackberries">
    </div>
    <div class="box">
      <img src="css/images/brunch.jpg" alt="brunch">
    </div>
    <div class="box">
      <img src="css/images/utensils.jpg" alt=" cooking utensils">
    </div>
    <div class="box">
      <img src="css/images/blackberries.jpg" alt="blackberries">
    </div>
  </div>
</body>
</html>

关键修改说明 #

• 用1fr替代固定10rem列宽，让Grid列自动填满容器宽度，跨列效果更直观
• 修正行定义的语法错误，用grid-auto-rows自动生成统一高度的行
• 调整图片样式，确保图片填满跨列后的容器，同时保持比例不变
• 使用grid-column:2 / -1替代固定列数范围，后续调整列数时跨列逻辑依然生效

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