CSS Grid with an additional wrapper in the middle - css

Question

I want to use CSS Grid's grid-template-areas.
But the problem is that the CMS I'm using is adding lots of additional wrappers.
Is there a way to ignore extra wrappers? since it is messing up the nice grid areas...
I'm trying to override css grid's auto-placement mechanism.
So any div that is in the middle, and wasn't assigned a specific grid-area, will appear at the end of the grid, and wouldn't mess with the grid itself.
I created an example of the problem here -
https://codepen.io/shaal/pen/qPvQWW
You can see that because of the extra wrapper, the 'sidebar' element is not assigned to the areas I wanted it to be.
HTML
.container {
display: grid;
grid-gap: 5px;
grid-template-areas: "header header header" "sidebar content content" "sidebar content content" "footer footer footer";
}
.header {
grid-area: header;
}
.sidebar {
grid-area: sidebar;
}
.content {
grid-area: content;
height: 180px;
}
.footer {
grid-area: footer;
}
<h1>CSS GRID</h1>
<div class="container">
<div class="item header">Header</div>
<div class="cms-annoying-wrapper">
<div class="item sidebar">Sidebar</div>
<div class="item content">Content</div>
</div>
<div class="item footer">Footer</div>
</div>

Answer 1

Grid Layout Module Level 2 - Subgrids are supposed to solve this problem.
In the meantime, there is a workaround:
display: contents (caniuse)
From Caniuse:
display: contents causes an element's children to appear as if they
were direct children of the element's parent, ignoring the element
itself. This can be useful when a wrapper element should be ignored
when using CSS grid or similar layout techniques.
So in your scenario you could simply add the rule:
.cms-annoying-wrapper {
display: contents;
}
body {
margin: 10px;
text-align: center;
width: 580px;
}
.cms-annoying-wrapper {
display: contents;
}
.container {
display: grid;
grid-gap: 5px;
grid-template-areas:
"header header header"
"sidebar content content"
"sidebar content content"
"footer footer footer";
}
.item {
color: white;
padding: 1.5em 0;
font-size: 2em;
}
.header {
background: #0d6;
}
.sidebar {
background: #f00;
}
.content {
background: #d60;
}
.footer {
background: #60d;
}
.header {
grid-area: header;
}
.sidebar {
grid-area: sidebar;
}
.content {
grid-area: content;
height: 180px;
}
.footer {
grid-area: footer;
}
<h1>CSS GRID</h1>
<div class="container">
<div class="item header">Header</div>
<div class="cms-annoying-wrapper">
<div class="item sidebar">Sidebar</div>
<div class="item content">Content</div>
</div>
<div class="item footer">Footer</div>
</div>
Codepen Demo (firefox)

Answer 2

If using the unwrap jQuery function to remove this div is not a problem for you I would use it.
$(".sidebar").unwrap(".cms-annoying-wrapper");
Otherwise in plain JS :
https://plainjs.com/javascript/manipulation/unwrap-a-dom-element-35/