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

Question

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

我试过更改 grid-template-areas 以包含 "subcontent" 但这似乎是错误的并且会破坏网格。

例如，我设置了以下模板，并希望 "subcontent" div（粉红色）在遇到媒体断点时替换 "profile" 区域。

有没有办法在纯 CSS 网格中做到这一点而不用 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

I'm tinkering with CSS Grid and was wondering if it's possible to have nested grids move out of their parent grids when resizing the screen.

就像您无法提取嵌套的弹性容器以便它们可以作为祖先弹性容器的弹性项目参与一样，您也无法提取嵌套的网格来做同样的事情。

您必须使布局中其他网格项的 subcontent1 和 subcontent2 成为兄弟项才能重新定位它们。

I've tried changing the grid-template-areas to include "subcontent" but this seems to be wrong and disrupts the grid.

这种中断是有充分理由的。您发布了无效的字符串值。

这个不错：

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 中实际上没有页脚，因此不会呈现任何内容。不管怎样，无效字符串的存在破坏了布局。

这里有更完整的解释：

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

Extracting nested grids from parent grids in CSS Grid

html

css

responsive-design

css-grid