Extracting nested grids from parent grids in CSS Grid

Question

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.

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

As an example, I've set up the following template and would like the "subcontent" divs (pink) to replace the "profile" area when the media breakpoint is hit.

Is there any way to do this in pure CSS Grid without roping in 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>

Michael Benjamin · Accepted Answer · 2017-08-25T14:05:26.267

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.

Just like you can't extract nested flex containers so they can participate as flex items of an ancestor flex container, you can't extract nested grids to do the same thing.

You would have to make subcontent1 and subcontent2 siblings of the other grid items in your layout to re-position them.

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

There's a good reason for this disruption. You've posted invalid string values.

This is good:

grid-template-areas: " title profile"
                     " infobar infobar "
                     " maincontent sidebar "

This is good, as well:

grid-template-areas: "subcontent1 subcontent2"
                     "subcontent1 subcontent2"

This is bad:

grid-template-areas: "title title sidebar"
                     "infobar infobar infobar"
                     "profile maincontent maincontent"
                     "footer footer sidebar"

Your last declaration is invalid.

String values of the grid-template-areas property must form rectangular blocks. Since sidebar appears twice in a disconnected manner, the entire layout breaks.

In contrast, try these out instead:

grid-template-areas: "title title sidebar"
                     "infobar infobar infobar"
                     "profile maincontent maincontent"
                     "footer footer footer"

jsFiddle demo

OR

grid-template-areas: "title title sidebar"
                     "infobar infobar infobar"
                     "profile maincontent maincontent"
                     "footer footer ..."

jsFiddle demo

Now the layout works. However, there's actually no footer in your HTML, so nothing will render. Regardless, the presence of an invalid string was breaking the layout.

Here are more complete explanations:

Argh! Thanks for pointing out the glaring mistake in the template areas. I must have left them that way while shifting stuff about. The "disrupted grid" I was referring to was more to do with trying a layout like: "title title title" "infobar infobar infobar" "profile maincontent maincontent" "subcontent subcontent subcontent" Thanks for pointing me in the right direction and for the informative links! — GroomedGorilla, Aug 25 '17 at 15:56

Extracting nested grids from parent grids in CSS Grid

1 Answers1