从 CSS Grid 中的父网格中提取嵌套网格

Question

我正在修改 CSS 网格，想知道在调整屏幕大小时是否可以让嵌套网格移出其父网格。

我尝试将grid-template-areas 更改为包含“子内容”，但这似乎是错误的并且会破坏网格。

作为示例，我设置了以下模板，并希望在点击媒体断点时用“子内容”div（粉红色）替换“配置文件”区域。

有没有什么方法可以在纯 CSS Grid 中做到这一点而无需在 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
	  <div class="subcontent1">Main1</div>
	  <div class="subcontent2">Main2</div>
  </div>
  <div class="sidebar">Sidebar</div>
</div>

Answer 1

我正在修改 CSS Grid，想知道在调整屏幕大小时是否可以让嵌套网格移出其父网格。

就像您不能提取嵌套的 flex 容器以便它们可以作为祖先 flex 容器的 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 中实际上没有页脚，因此不会呈现任何内容。无论如何，无效字符串的存在破坏了布局。

这里有更完整的解释：

• grid-template-areas with ASCII art is not working
• Grid areas not laying out properly in CSS Grid