如何在跨两行的图片单元格中延续标题与描述的背景色

问题概述 #

组件包含标题行、描述行及跨两行的图片单元格，需让标题、描述的背景色延伸至图片列区域，且标题/描述长度随CMS内容动态变化，排除了依赖百分比计算的position: absolute伪元素方案，尝试Grid模板区域和subgrid未达预期。

可行方案：网格伪元素背景填充 #

无需修改现有HTML结构，通过给网格容器添加伪元素，让其占据对应网格行的全部宽度（含图片列）作为背景层，文本内容置于上方即可实现需求。

完整代码 #

CSS

:root {
    --color-primary: lightblue;
    --color-secondary: orange;
    --color-tertiary: lightgreen;
}

.component {
    display: grid;
    grid-template-areas: 'headline image' 'description image';
    grid-template-rows: auto auto;
    max-width: 960px;
    outline: 2px dashed orchid;
}

/* 伪元素作为背景层，占据对应网格区域的全部宽度 */
.component::before,
.component::after {
    content: '';
    z-index: -1; /* 置于文本下方，避免遮挡 */
}

.component::before {
    grid-area: headline;
    background-color: var(--color-primary);
}

.component::after {
    grid-area: description;
    background-color: var(--color-secondary);
}

.text--headline {
    grid-area: headline;
}

.text--description {
    grid-area: description;
}

.image {
    grid-area: image;
    display: grid;
    align-content: center;
    justify-content: center;
    min-width: 200px;
    min-height: 400px;
}

.image-fake {
    width: 100px;
    height: 200px;
    padding: 8px;
    background-color: var(--color-tertiary);
}

.text {
    padding-inline: 8px;
}

HTML

<div class="component">
    <div class="text text--headline">
      <h1>Split Background Headline</h1>
    </div>
    <div class="text text--description">
      <p>Split Background Description</p>
    </div>
    <div class="image">
      <div class="image-fake">This is an image</div>
    </div>
</div>

方案原理 #

1. 伪元素作为网格容器的子元素，通过grid-area绑定到标题/描述的网格区域，自动继承该区域的行高与全列宽度，完美适配动态内容的高度变化。
2. z-index: -1确保伪元素位于文本下方，仅作为背景显示，不影响交互与文本可读性。
3. 无需手动计算高度或百分比，完全依赖Grid布局的自动轨道分配，稳定性高。

关于subgrid的说明 #

你之前的subgrid用法不符合其设计逻辑：subgrid的作用是让子元素继承父网格的轨道定义，用于嵌套网格的对齐，而非扩展背景区域。因此伪元素方案更直接适配当前需求。

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