将元素从嵌套的“CSS Grid”移到外部

Question

我想以较小的屏幕宽度从嵌套网格中提取元素。在该示例中，当屏幕达到某个像素宽度时，所有元素都相互设置。

我希望元素一个接一个地显示，并以更大的像素宽度返回原始区域。可能这是一个相当简单的解决方案，但我还没有找到任何提示。也许有人有想法？

body {
  margin: 40px;
}

.sidebar {
  grid-area: sidebar;
}

.sidebar2 {
  grid-area: sidebar2;
}

.content {
  grid-area: content;
}

.header {
  grid-area: header;
}

.footer {
  grid-area: footer;
}

.wrapper {
  background-color: #fff;
  color: #444;
}

.wrapper {
  display: grid;
  grid-gap: 1em;
  grid-template-areas: "header" "sidebar" "content" "sidebar2" "footer"
}

@media only screen and (min-width: 500px) {
  .wrapper {
    grid-template-columns: 20% auto;
    grid-template-areas: "header   header" "sidebar  content" "sidebar2 sidebar2" "footer   footer";
  }
}

@media only screen and (min-width: 600px) {
  .wrapper {
    grid-gap: 20px;
    grid-template-columns: 120px auto 120px;
    grid-template-areas: "header  header  header" "sidebar content sidebar2" "footer  footer  footer";
    max-width: 600px;
  }
}

.box {
  background-color: #444;
  color: #fff;
  border-radius: 5px;
  padding: 10px;
  font-size: 150%;
}

.header,
.footer {
  background-color: #999;
}

.sidebar2 {
  background-color: #ccc;
  color: #444;
}

<div class="wrapper">
  <div class="box header">Header</div>
  <div class="box sidebar">Sidebar</div>
  <div class="box sidebar2">Sidebar 2</div>
  <div class="box content"> Content

    <div class="box nested_sidebar">Sidebar 2</div>
    <div class="box nested_sidebar">Sidebar 2</div>

  </div>
  <div class="box footer">Footer</div>
</div>

Answer 1

网格容器是父元素。

网格项是子元素（并且只有子元素；子元素之外的后代不是网格项）。

网格项的子元素，好吧，不管它们是什么，它们都不是主容器的子元素，因此它们不是网格项，并且不能像它们的网格项父项一样接受网格属性。

因此，除非你想使用绝对定位，否则没有干净的 CSS 方法可以将嵌套元素移动到主网格容器中。

但是，删除嵌套怎么样？网格非常擅长让元素重叠。

jsFiddle demo

.wrapper {
  display: grid;
  grid-template-rows: 1fr;
  grid-gap: 1em;
  grid-template-areas: "header" 
                       "sidebar"
                       "content"
                        "..."
                        "..."
                       "sidebar2"
                       "footer"
}

@media only screen and (min-width: 500px) {
  .wrapper {
    grid-template-columns: 20% 1fr;
    grid-template-rows: 100px repeat(3, 50px) 100px;    
    grid-template-areas: "header   header"
                         "sidebar  content"
                         "sidebar  content"  
                         "sidebar  content" 
                         "sidebar2 sidebar2"                         
                         "footer   footer";
   }
  .nested_sidebar1 {
   grid-row: 3 / 4;
   grid-column: 2 / 3;
 }
.nested_sidebar2 {
   grid-row: 4 / 5;
   grid-column: 2 / 3;
 
}
}

@media only screen and (min-width: 800px) {
  .wrapper {
    grid-gap: 20px;
    grid-template-columns: 120px auto 120px;
    grid-template-rows: 100px repeat(3, 50px) 100px;
    grid-template-areas: "header  header  header"
                         "sidebar content sidebar2"
                         "sidebar content sidebar2"
                         "sidebar content sidebar2"                         
                          "footer  footer  footer";
  }
  }
  
.box {
  background-color: #444;
  color: #fff;
  border-radius: 5px;
  padding: 10px;
  font-size: 150%;
}  
  
.header {
  grid-area: header;
  background-color: #999;
}

.sidebar {
  grid-area: sidebar;
}

.sidebar2 {
  grid-area: sidebar2;
  background-color: #ccc;
  color: #444;
}

.content {
  grid-area: content;
}

.nested_sidebar1 {
   background-color: orange;
}
.nested_sidebar2 {
    background-color: tomato;
}

.footer {
  grid-area: footer;
  background-color: #999;
}

<div class="wrapper">
  <div class="box header">Header</div>
  <div class="box sidebar">Sidebar</div>
  <div class="box sidebar2">Sidebar 2</div>
  <div class="box content">Content</div>
  <div class="box nested_sidebar1">Sidebar 2a</div>
  <div class="box nested_sidebar2">Sidebar 2b</div>
  <div class="box footer">Footer</div>
</div>

Answer 2

我会尝试使用fr 而不是% 以及包含grid-template-rows 来获得您想要的结果。

如果您发布您希望实现的线框图，我很乐意试一试。