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>

Michael Benjamin · Accepted Answer · 2017-09-27 22:52:03Z

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>

Ian Patrick · Accepted Answer · 2017-09-27 18:44:43Z

0

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.

answered Sep 27, 2017 at 18:44

Ian Patrick

193 bronze badges

Collectives™ on Stack Overflow

Move elements from nested "CSS Grid" to the outside

2 Answers 2

jsFiddle demo

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related