Question

我想从较小屏幕宽度的嵌套网格中显示元素。在该示例中，当屏幕达到特定像素宽度时，元素全部彼此设置。

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

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

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来获得您想要的结果。

如果你发布了你希望实现的线框，我很乐意尝试一下。

从嵌套的＆＃34; CSS Grid＆＃34;移动元素到外面

2 个答案:

jsFiddle demo