CSS Grid中.line元素无法跨列铺满intro宽度的问题求助

问题核心原因 #

1. 选择器不匹配
   CSS中使用了.inleiding .line选择器，但HTML里的容器类是intro，导致网格布局样式从未作用到.line元素上，它默认处于网格的第一列位置。

2. 网格行定位错误
   直接设置grid-row:5会让.line跳到第5行，而当前仅使用了前2行网格，中间行无内容且未定义行高，会导致元素位置异常甚至不可见。

3. 缺少基础显示样式
   .line没有设置高度、背景色等样式，即便位置正确也无法被看到。

修正后的代码 #

CSS

@media(min-width:768px) {
  .container {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
  }
  .intro {
    display: grid;
    grid-template-columns: 75px 1fr 1fr 75px;
    grid-gap: 10px;
    /* 显式定义行高，避免自动行高为0 */
    grid-template-rows: auto auto auto;
  }
  .grid-item:nth-child(1) {
    grid-column: 2 / 3;
  }
  .grid-item:nth-child(2) {
    grid-column: 2 / 3;
  }
  .grid-item:nth-child(3) {
    grid-row: 1 / 2;
    grid-column: 3 / 4;
  }
  .grid-item:nth-child(4) {
    grid-row: 2 / 3;
    grid-column: 3 / 4;
  }
  /* 修正选择器，匹配HTML中的容器类 */
  .intro .line {
    /* 将线条放在内容下方的第3行 */
    grid-row: 3;
    /* 跨列覆盖中间两个内容列 */
    grid-column: 2 / 4;
    /* 添加基础样式让线条可见 */
    height: 2px;
    background-color: #000;
    /* 可选：抵消grid-gap的间隙，让线条完全铺满列宽 */
    margin: 0 -10px;
  }
}

HTML（无需修改）

<article class="intro">
  <h2 class="grid-item">WWE</h2>
  <p class="grid-item">WWE, afkorting .....</p>
  <h2 class="grid-item">Wat is er met de WWF gebeurd ?</h2>
  <p class="grid-item">Het bedrijf .....</p>
  <div class="line"></div>
</article>

额外说明 #

• 若不需要抵消grid-gap的间隙，可去掉margin:0 -10px，线条会保持网格间隙的内边距范围
• 若后续内容增加，可调整grid-row的值，或使用grid-row:auto让元素自动排列到网格末尾

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