html - 将元素移出 CSS 网格中的列

Question

我需要在不接触 HTML 的情况下显示右栏中的元素。目前，最现实的选择似乎是 CSS 网格布局。如果我的 HTML 看起来像这样，有什么可能吗？

<div class="parent">
    <div class="column1 image"></div>
    <div class="column2">
        <div class="description"></div>
        <div class="additional-info"></div>
    </div>
</div>

目标是使附加信息跨越整个页面宽度，而不是它指定的 50% 列。类似于以下内容:

.parent {
    display: inline-grid !important;
    grid-template-columns: 50% 50%;
    grid-gap: 1em;
    grid-template-areas:    "image description"
                            "additional additional"

.image {
    grid-area: image;
}

.description {
    grid-area: description;
}

.additional-info {
    grid-area: additional;
}

这里的问题是我的网格元素不在同一层。

我会修复 HTML，但实际代码涉及更多元素和渲染。如何仅使用 CSS 去除 HTML 嵌套？

Answer 1

这不是我想出来的，但我相信这是您正在寻找的东西。将此 .full-bleed 类添加到具有 .additional-info 类的元素，它将跨越整个页面。

它将占据视口(viewport)的整个宽度，并使用变换和平移将其居中。或者，您可以使用负边距。它会转义任何容器，因此即使您的父元素是嵌套的并且不是全宽的，这也是。

在这种情况下不需要 CSS 网格。

// Escape any container, set this element to be 100vw and aligned to viewport without taking it out of normal document flow.
.full-bleed {
  width: 100vw;
  margin-left: 50%;
  transform: translateX(-50%);
}