CSS Grid内容居中与背景图像设置技术求助

一、修复Grid布局居中与额外单元格问题 #

问题根源 #

1. grid-template-rows使用逗号分隔行高是语法错误，正确格式应为空格分隔，错误语法导致行高失效，出现多余单元格
2. grid-template-columns用auto作为左右列，无法均分剩余空间，导致中间列无法真正居中
3. 未给welcome-container设置width: 100%，Grid布局无法占满父元素宽度，左右边距分配异常

修改方案 #

.welcome {
  width: 100%; /* 让section占满屏幕宽度 */
}

.welcome-container {
  display: grid;
  /* 左右列均分剩余空间，中间列最大1200px，最小自适应内容 */
  grid-template-columns: 1fr minmax(auto, 1200px) 1fr;
  /* 修复行高语法，用空格分隔，数值可根据需求调整 */
  grid-template-rows: 400px auto 100px 100px;
  width: 100%; /* 让Grid容器占满父元素 */
  z-index: 1;
}

/* 艺术家署名固定在中间列右下角 */
.artist-credit {
  grid-column: 2;
  align-self: end; /* 垂直方向靠下 */
  justify-self: end; /* 水平方向靠右 */
  margin: 10px; /* 避免贴边，可自行调整 */
}

效果说明 #

• 左右1fr列自动均分屏幕剩余空间，中间列自然居中，且最大宽度被限制在1200px
• 修复行高语法后，多余单元格消失，每个内容块对应正确的行
• 艺术家署名通过align-self和justify-self固定在中间列右下角

二、实现中间列响应式背景图 #

最优方案：用伪元素做背景（仅覆盖中间列） #

无需额外HTML元素，通过伪元素生成背景层，完全贴合中间列范围，内容自动叠加在上方：

.welcome-container {
  position: relative; /* 让伪元素相对于容器定位 */
}

/* 生成中间列的背景层 */
.welcome-container::before {
  content: "";
  grid-column: 2; /* 仅占据中间列 */
  grid-row: 1 / -1; /* 占据所有行的高度 */
  background: url("你的背景图地址") center/cover no-repeat;
  /* center居中，cover保证覆盖整个中间列区域，自动适配尺寸 */
  z-index: -1; /* 把背景层放在内容下方 */
  background-color: var(--color-dark); /* 图片加载失败时的备用色 */
}

适配说明 #

• 屏幕宽度小于1200px时，中间列随屏幕宽度缩小，背景图自动缩放适配，不会拉伸变形
• 屏幕宽度大于1200px时，中间列固定1200px宽度，背景图保持该宽度，左右为空白边距
• 无需额外媒体查询，minmax和background-size: cover已实现响应式适配

修改后的完整代码 #

HTML #

<section class="welcome">
    <div class="welcome-container">
        <div id="welcome-title">Some Title</div>
        <div class="welcome-slogan">Slogan</div>
        <div class="welcome-quote fst-italic">"A quote" -Person</div>
        <div class="artist-credit">Image by <a href="#">Artist</a></div>
    </div>
</section>

CSS #

:root {
  --color-dark: #333;
  --color-med: #666;
}

.welcome {
  width: 100%;
}

.welcome-container {
  display: grid;
  grid-template-columns: 1fr minmax(auto, 1200px) 1fr;
  grid-template-rows: 400px auto 100px 100px;
  width: 100%;
  position: relative;
  z-index: 1;
}

.welcome-container::before {
  content: "";
  grid-column: 2;
  grid-row: 1 / -1;
  background: url("你的背景图地址") center/cover no-repeat;
  z-index: -1;
  background-color: var(--color-dark);
}

#welcome-title {
  grid-column: 2;
  display: flex;
  justify-content: center;
  align-items: center; /* 垂直居中，让标题在行内居中 */
  font-size: 60px;
  font-family: 'Roboto Mono';
  font-weight: 400;
  color: var(--color-dark);
}

.welcome-slogan {
  grid-column: 2;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 28px;
  font-family: 'Roboto Mono';
  font-weight: 300;
  color: var(--color-med);
}

.welcome-quote {
  grid-column: 2;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 18px;
  font-family: 'Roboto Mono';
  font-weight: 300;
  color: var(--color-dark);
}

.artist-credit {
  grid-column: 2;
  align-self: end;
  justify-self: end;
  margin: 10px;
  font-family: 'Roboto Mono';
  color: var(--color-dark);
}

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