我想使用 CSS Grid 的 grid-template-areas。
但问题是我使用的 CMS 添加了许多额外的包装器。有没有办法忽略额外的包装器？因为它弄乱了漂亮的网格区域......
我正在尝试覆盖 css 网格的自动放置机制。因此，任何位于中间且未分配特定网格区域的 div 将出现在网格的末尾，并且不会与网格本身混淆。
我在这里创建了一个问题示例 - https://codepen.io/shaal/pen/qPvQWW
您可以看到，由于额外的包装器，“侧边栏”元素没有分配到我想要的区域。
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>