将元素从嵌套的“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演示

 .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来获得所需的结果。

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