html - 将元素从嵌套的 "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>