Move elements from nested “CSS Grid” to the outside

Question

I want to bring out the elements from a nested grid at a smaller screen width. In the example, the elements are all set to one another when the screen reaches a certain pixel width.

I would like the elements to be displayed one after the other, and to return to the original area with a larger pixel width. Probably this is a fairly simple solution but I could not find any tip yet. Maybe someone has an idea?

 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

The grid container is the parent element.

The grid items are the child elements (and only the child elements; descendants beyond the children are not grid items).

The child elements of grid items are, well, whatever they may be, they are not children of the main container, so they are not grid items and cannot accept grid properties like their grid item parents.

Therefore, unless you want to use absolute positioning, there is no clean CSS method for moving nested elements into the main grid container.

However, how about removing the nesting? Grid is very good at allowing elements to overlap.

jsFiddle demo

 .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

I would play around with using fr instead of % as well as including grid-template-rows to get your desired result.

If you post a wire-frame of what you're hoping to achieve I'd be happy to give it a shot.