Extracting nested grids from parent grids in CSS Grid - html

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>

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.
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:
grid-template-areas with ASCII art is not working
Grid areas not laying out properly in CSS Grid