如何在拉伸图像网格中继续带有标题和描述的两行网格的背景颜色

Question

我有一个由两行组成的组件，其中有标题和描述。还有一个跨越两行的图像单元格。标题和描述都有背景颜色。问题是我还没想出如何继续背景颜色。

这就是我现在所拥有的。 （另请参阅此Stackblitz 示例。）

这就是我想要实现的目标。

困难在于标题或描述具有不同的长度取决于内容管理系统中的内容。

所以它也可以看起来像这样，例如

我尝试使用带有模板区域的网格和以下 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>

还有这个CSS

.component {
  display: grid;
  grid-template-areas:
    "headline image"
    "description image";
  grid-template-rows: auto auto;
  /* ... */
}

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

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

.image {
  grid-area: image;
  /* ... */
}

.image-fake {
  /* ... */
}

有关完整代码，请参阅已经提到的Stackblitz。

没有解决方案是将

pseudo-classes

与

position: absolute

一起使用，因为那样我必须计算百分比，这总是不稳定的。

我希望

subgrid

可以在这里提供帮助，例如

.image {
  grid-area: image;
  /* ... */

  display: grid;
  grid-template-columns: subgrid;
  grid-template-rows: subgrid;
}

但这破坏了布局。

也许我对这里的子网格还不够了解，也许还有另一种解决方案。

那么你有什么提示吗？

Answer 1

这里的技巧是使用线性渐变作为标题和描述文本的背景。渐变从所需的颜色开始，并在中点处过渡到透明，从而创建所需的连续性。

根据需要调整 padding-right 值和颜色以实现您想要的设计。

尝试一下，看看它是否适合您的情况！如果您还有其他需要，请告诉我。

.component {
  display: grid;
  grid-template-areas:
    "headline image"
    "description image";
  grid-template-rows: auto auto;
  grid-template-columns: 1fr 1fr;
}

.text--headline {
  grid-area: headline;
  background: linear-gradient(to right, #your-color, #your-color 50%, transparent 50%);
  padding-right: 20px; /* Adjust as needed */
}

.text--description {
  grid-area: description;
  background: linear-gradient(to right, #your-color, #your-color 50%, transparent 50%);
  padding-right: 20px; /* Adjust as needed */
}

.image {
  grid-area: image;
  display: flex;
  align-items: center;
  justify-content: center;
}

.image-fake {
  width: 100%;
  height: 100%;
  background: #ddd;
}

<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>