Move elements outside the column in CSS grid

Question

I would need to bring out the elements inside the right column without touching HTML. Currently, the most realistic option seems to be the CSS grid layout. Is it in any way possible if my HTML looks like this?

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

The goal is to make additional-info to span across the whole page width, not the 50% column it is designated to. Something like the following:

.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;
}

The issue here would be that my grid elements are not on the same level.

I would fix the HTML, but the actual code involves a lot more elements and rendering. How could I remove the HTML nesting with only using CSS?

Answer 1

This is not something I came up with but it is what you are looking for I believe. Add this .full-bleed class to the element with .additional-info class and it will span across the whole page.

It will take up the full width of the viewport and center it using transform and translate. Alternatively, you could use negative margins. It will escape any container, so even if your parent element is nested and not full width, this will be.

No need for CSS grid in this case.

// 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%);
}