在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網格中從父網格中提取嵌套網格

回答

相關問題