gpt4 book ai didi

CSS 网格,中间有一个额外的包装器

转载 作者:行者123 更新时间:2023-12-02 05:28:32 32 4
gpt4 key购买 nike

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

最佳答案

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

<小时/>

与此同时,有一个解决方法:

<强> display: contents ( caniuse )

来自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.

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

.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 (火狐)

关于CSS 网格,中间有一个额外的包装器,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46856825/

32 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com