为什么我的CSS Grid行未占满全宽，行配置未正常生效？

问题原因 #

1. 关闭按钮设置了position: absolute，属于脱离普通文档流的元素，Grid布局的行列规则对绝对定位元素不生效
2. 你把grid-row属性设置给了.modalContent的孙子元素（#title、.closeButton），但Grid布局的grid-row只对容器的直接子元素生效，外层包裹的div才是.modalContent的直接子节点，所以你的行列配置没生效
3. HTML结构里标题区块放在了关闭按钮区块前面，就算Grid配置生效，顺序也和你预期的相反
4. 两个.main都设置了grid-row: 3/4，会导致两个内容区块重叠，不符合左右分栏的预期

修复方案 #

1. 调整HTML结构

• 把关闭按钮的外层div移到标题div前面
• 将两个.main包裹在同一个父容器中，避免重叠

<div ID="modalAcidFish" class="modal">
  <div class="modalContent" ID="modalAcidFishContent">
    <!-- 关闭按钮区块：modalContent的直接子元素 -->
    <div class="close-wrap">
      <span class="closeButton">+</span>
    </div>
    <!-- 标题区块：modalContent的直接子元素 -->
    <div class="title-wrap">
      <h2 ID="title">Acid Fish</h2>
    </div>
    <!-- 内容区块：modalContent的直接子元素 -->
    <div class="main">
      <img class="modalImg" ID="modalAcidFishImg" src="Images/Acid Fish 2.jpeg">
      <div class="modalTxt">
        <p>绿色一直是我最喜欢的颜色之一。我在电视上看到一位女士穿了一套亮绿色的套装后，就想创作一个以这个颜色为灵感的作品。我第一次尝试在作品里用绿色做主色时，最终呈现的色彩效果很差，但我没有放弃用绿色的想法。最开始给画布铺色的时候，绿色有点太厚重了，我就用湿纸巾把部分颜料晕开，意外做出了墨渍的效果。</p>
        <p>接下来要考虑用什么颜色的纸，我琢磨了很久，最终觉得橙黑印花纸最合适。不仅颜色够突出，印花和手绘背景也很适配。为了平衡画面，我觉得折纸的整体布局和设计最好尽量简单，所以最后做了两条“接吻”、也就是面对面的鱼。</p>
      </div>
    </div>
  </div>
</div>

2. 修改对应CSS

• 移除关闭按钮的绝对定位属性
• 给.modalContent的直接子元素设置对应的grid-row，调整内容区的Grid配置

.modal {
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0;
  background-color: rgba(255, 128, 213, 0.5);
  display: grid;
  justify-content: center;
  align-items: center;
  display: none;
}

.modal>.modalContent {
  background-color: white;
  height: 100%;
  width: 75%;
  display: grid;
  /* 四行分别对应：关闭按钮行、标题行、内容行、底部留白行 */
  grid-template-rows: auto auto 1fr 1fr;
  align-items: start;
  position: relative;
}

/* 关闭按钮外层容器占第一行 */
.close-wrap {
  grid-row: 1/2;
  justify-self: end;
  padding-right: 14px;
}

.closeButton {
  /* 删掉绝对定位相关属性 */
  font-size: 50px;
  transform: rotate(45deg);
  padding: 0;
  cursor: pointer;
  background-color: transparent;
  border-style: unset;
}

/* 标题外层容器占第二行 */
.title-wrap {
  grid-row: 2/3;
  padding: 0 10%;
  width: 100%;
  box-sizing: border-box;
}

#title {
  background-color: #ff80d5;
  font-family: Gill Sans, sans-serif;
  color: white;
  font-weight: 100;
  height: 50px;
  display: flex;
  align-items: center;
  padding-left: 2%;
  margin: 0;
}

/* 内容区块占第三行 内部左右分栏 */
.modalContent>.main {
  grid-row: 3/4;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  padding: 0 10%;
  align-items: start;
}

.modalImg {
  width: 353px;
  height: 447px;
}

.modalTxt {
  width: 100%;
}

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