在CSS网格中从父网格中提取嵌套网格

我正在修补CSS网格，并想知道在调整屏幕大小时是否可能使嵌套网格移出其父网格。在CSS网格中从父网格中提取嵌套网格

我试过改变grid-template-areas以包含“subcontent”，但这似乎是错误的并且扰乱了网格。

作为一个例子，我设置了以下模板，并希望在触发媒体断点时用“subcontent”div（粉红色）替换“配置文件”区域。

有没有什么办法可以在纯CSS的网格中做到这一点，而无需在JS中进行绑定？

.wrapper { 
 
    margin: auto; 
 
    width: 80%; 
 
    background-color: #e0e0e0; 
 
    display: grid; 
 
    grid-template-columns: 3fr 1fr; 
 
    grid-template-rows: 2fr 1fr 4fr; 
 

 
    grid-template-areas: 
 
    " title profile" 
 
    " infobar infobar " 
 
    " maincontent sidebar "; 
 

 
    grid-gap: 1em; 
 
} 
 

 
.space { 
 
    background-color: #eeeeee; 
 
    grid-area: space; 
 
} 
 

 
.title { 
 
    grid-area: title; 
 
    background-color: red; 
 
} 
 

 
.profile { 
 
    grid-area: profile; 
 
    background-color: orange; 
 
} 
 

 
.infobar { 
 
    grid-area: infobar; 
 
    background-color: yellow; 
 
} 
 

 
.maincontent { 
 
    grid-area: maincontent; 
 
    display: grid; 
 
    grid-template-columns: 2fr 1fr; 
 
    grid-template-rows: 1fr 1fr; 
 
    grid-template-areas: 
 
    "subcontent1 subcontent2" 
 
    "subcontent1 subcontent2"; 
 
    
 
    background-color: green; 
 
} 
 

 
.subcontent1 { 
 
    grid-area: subcontent1; 
 
    background-color: pink; 
 
    margin: 10px; 
 
} 
 

 
.subcontent2 { 
 
    grid-area: subcontent2; 
 
    background-color: pink; 
 
    margin: 10px; 
 
} 
 

 
.sidebar { 
 
    grid-area: sidebar; 
 
    background-color: blue; 
 
} 
 

 
@media screen and (max-width: 900px) { 
 
    .wrapper { 
 
    grid-template-columns: 2fr 1fr 1fr; 
 
    grid-template-areas: 
 
    "title title sidebar" 
 
    "infobar infobar infobar" 
 
    "profile maincontent maincontent" 
 
    "footer footer sidebar" 
 
    ; 
 
    } 
 

 
    .maincontent{ 
 
    display: block; 
 
    } 
 

 
    .subcontent { 
 
     grid-area: subcontent; 
 
    } 
 
}

<div class="wrapper"> 
 
    <div class="title">Title</div> 
 
    <div class="profile">Profile</div> 
 
    <div class="infobar">Info Bar</div> 
 
    <div class="maincontent">Main Content 
 
\t <div class="subcontent1">Main1</div> 
 
\t <div class="subcontent2">Main2</div> 
 
    </div> 
 
    <div class="sidebar">Sidebar</div> 
 
</div>

来源

2017-08-25 GroomedGorilla

我与CSS网格修补，想知道是否有可能有嵌套电网调整后的画面时搬出他们的父母网格。

就像你不能提取嵌套的柔性容器，以便他们可以作为祖先柔性容器的flex项目参与一样，你不能提取嵌套的网格来做同样的事情。

你将不得不让其他网格项目的subcontent1和subcontent2兄弟姐妹在布局重新定位他们。

我试图改变grid-template-areas包括“子内容”，但是这似乎是错误的，破坏了电网。

这种干扰是有原因的。您发布了无效的字符串值。

这是一件好事：

grid-template-areas: " title profile" 
        " infobar infobar " 
        " maincontent sidebar "

这是一件好事，还有：

grid-template-areas: "subcontent1 subcontent2" 
        "subcontent1 subcontent2"

这是不好：

grid-template-areas: "title title sidebar" 
        "infobar infobar infobar" 
        "profile maincontent maincontent" 
        "footer footer sidebar"

你的最后声明是无效的。

grid-template-areas属性的字符串值必须形成矩形块。由于sidebar以断开的方式出现两次，整个布局中断。

相反，尝试这些了，而不是：

grid-template-areas: "title title sidebar" 
        "infobar infobar infobar" 
        "profile maincontent maincontent" 
        "footer footer footer"

jsFiddle demo

grid-template-areas: "title title sidebar" 
        "infobar infobar infobar" 
        "profile maincontent maincontent" 
        "footer footer ..."

jsFiddle demo

现在布局的作品。 但是，HTML中实际上没有页脚，因此不会呈现任何内容。无论如何，一个无效字符串的存在破坏了布局。

这里有更完整的解释：

来源

2017-08-25 13:44:51

哎呀！感谢您指出模板领域的明显错误。我一定是在转移某些东西的时候离开了他们。的“扰乱电网”我指的是更多的是试图像一个布局： “标题标题标题” “INFOBAR INFOBAR INFOBAR” “个人资料搜索Maincontent搜索Maincontent” “子内容子内容子内容” 谢谢指引我在正确的方向和信息链接！ – GroomedGorilla

在CSS网格中从父网格中提取嵌套网格

回答

相关问题