CSS Grid 中间有一个额外的包装器

Question

我想使用 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>

Answer 1

网格布局模块级别 2 - 子网格应该解决这个问题。

同时，有一个解决方法：

显示：内容（ caniuse）

来自卡尼乌斯：

display: contents使元素的子元素看起来好像是元素父元素的直接子元素，而忽略元素本身。当使用 CSS 网格或类似布局技术时应该忽略包装器元素时，这会很有用。

因此，在您的场景中，您可以简单地添加规则：

.cms-annoying-wrapper {
  display: contents;
}

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

Codepen 演示（火狐）

Answer 2

如果使用 unwrap jQuery 函数删除这个 div 对你来说不是问题，我会使用它。

$(".sidebar").unwrap(".cms-annoying-wrapper");

否则在普通 JS 中： https://plainjs.com/javascript/manipulation/unwrap-a-dom-element-35/