CSS Grid Nested in a Wrapper-Div or a Body Element

CSS Grid nested in a wrapper-div or a body element?

The purposes of wrappers are several, including:

• to group elements semantically, for instance to separate page heading
  from body text from sidebar from footer.
• to group elements cosmetically, such as with a surrounding border or
  a common background image or color.
• to group elements in layout, such as to keep them all in the same
  column when columns are floated next to one another.
• to enable special positioning, as when a wrapper is given relative
  positioning in order to contain child elements with absolute
  positioning.
• to make it more convenient to specify elements in CSS and JavaScript
  by referring to their parent, without having to id or class each
  child element.

(Note: the var above should all be on one line)

So in this case, i think they all used a wrapper div just to group elements in layout.

Move elements from nested CSS Grid to the outside

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>

How to place nested DIVs in a CSS grid with variable row heights?

What you are looking for is Subgrid, feature currently (December 2021) only tested on Firefox Nightly.

Info about this CSS attribute (from the Mozilla Web Docs page) :

When you add display: grid to a grid container, only the direct children become grid items and can then be placed on the grid that you have created.

You can "nest" grids by making a grid item a grid container. These grids however are independent of the parent grid and of each other, meaning that they do not take their track sizing from the parent grid. This makes it difficult to line nested grid items up with the main grid.

For example, if you use grid-template-columns: subgrid and the nested grid spans three column tracks of the parent, the nested grid will have three column tracks of the same size as the parent grid.

When the feature will be available and supported by multiple browsers this example below will work (I guess):

html, body {
  width: 100%;
  height: 100%;
  margin: 0;
}
.wrapper {
  display: grid;
  height: 100vh;
  width: 100vw;
  background: grey;
  grid-auto-flow: rows;
  grid-template-columns: auto auto;
  grid-template-rows: auto auto;
}
.container {
  display: grid;
  grid-column: 1 / 3;
  grid-row: 1 / 3;
  grid-template-columns: subgrid;
  grid-template-rows: subgrid;
}
.a1{
  background-color: blue;
  grid-row: 1;
  grid-column: 1;
}
.a2{
  background-color: yellow;
  grid-row: 1;
  grid-column: 2;
}
.b1 {
  background-color: red;
  grid-row: 2;
  grid-column: 1;
}
.b2 {
  background-color: green;
  grid-row: 2;
  grid-column: 2;
}

<div class="wrapper">
  <div class="container a">
    <div class="cell a1">A1</div>
    <div class="cell a2">A2</div>
  </div>
  <div class="container a">
    <div class="cell b1">B1</div>
    <div class="cell b2">B2</div>
  </div>
</div>

Layout combining two CSS Grids

You could use display:contents to avoid the subcontainers to come in the way and use display grid and grid-area (grid-row/grid-column) to dispatch your elements.

But this is not yet working everywhere !

Demo of the idea

.part5 {
  display: grid;
  grid-template-colums: repeat(6, 1fr);
  min-height: 100vh
}

.container.group1,
.container.group2 {
  display: contents;
}

.item1 {
  grid-column: 1/ span 6;
  grid-row: 1;
  border: solid;
  color: tomato;
}

.item2 {
  grid-row: 2 /span 3;
  grid-column: 1 /span 2;
  border: solid;
  color: turquoise;
}

.item3 {
  grid-row: 2;
  grid-column: 3/span 4;
  border: solid;
  color: green;
}

.item4 {
  grid-row: 3;
  grid-column: 3 /span 2;
  border: solid;
}

.item5 {
  grid-row: 3;
  grid-column: 5 / span 2;
  border: solid;
  color: brown;
}

.item6 {
  grid-row: 4;
  grid-column: 3 / span 4;
  border: solid;
  color: purple;
}

/* demo*/

* {
  margin: 0;
}

[class^=item] {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: calc(2vh + 2vw)
}

<section class="part5 container">
  <div class="container group1">
    <div class="item item1">Item 1</div>
    <div class="item item2">Item 2</div>
    <div class="item item3">Item 3</div>
  </div>
  <div class="container group2">
    <div class="item item4">Item 4</div>
    <div class="item item5">Item 5</div>
    <div class="item item6">Item 6</div>
  </div>
</section>

How do I best use CSS to make a page with tall nested elements to be limited to the height of the viewport?

If you aren't married to using bootstrap/flexbox, css grid makes this pretty easy.

HTML

<div class="wrapper">
   <div class="header">
     My full-width page title goes here 
   </div>
   <div class="sidebar">
      sidebar content
    </div>
    <div class="main">
     main content 
    </div>
</div>

CSS

html, body, .wrapper {
  height: 100%;
}

.wrapper {
  display: grid;
  grid-template-columns: 1fr 2fr;
  grid-auto-rows: min-content auto;
  grid-template-areas: 
    "header header"
    "sidebar main";
}

.header {
  grid-area: header;
  background: red;
}

.sidebar {
  grid-area: sidebar;
  overflow: auto;
}

.main {
  grid-area: main;
}

fiddle

Convert a fluid nested flexbox grid to stacked for mobile

Maybe there is a way with a flexbox - assuming the mobile view is below 650px, position the third div absolutely relative to the wrapper.

A possible issue can be that the third div fully overflows the wrapper. Well, check out the demo below:

body {  text-align: center;}
.wrapper {  background-color: #ddd;  display: flex;  position: relative;}
.nested-wrapper1 {  display: flex;  width: 50%;}
.nested-wrapper2 {  width: 50%;}
.nested-wrapper1>[class='1'] {  background-color: cyan;  padding: 1em;  flex: 1;}
.nested-wrapper2>[class='2'] {  background-color: pink;  padding: 1em;}
.nested-wrapper2>[class='3'] {  background: lightblue;  padding: 1em;}
@media screen and (max-width: 650px) {  .nested-wrapper2>[class='2'] {    height: 100%;  }  .nested-wrapper2>[class='3'] {    position: absolute;    left: 0;    right: 0;    bottom: 0;    transform: translateY(100%);  }}

<div class="wrapper">  <div class="nested-wrapper1">    <div class="1">      1. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has      survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.    </div>  </div>  <div class="nested-wrapper2">    <div class="2">      2. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.       2. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.    </div>    <div class="3">      3. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has      survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop      publishing software like Aldus PageMaker including versions of Lorem Ipsum.    </div>  </div></div>

Center nested resizable divs to body page

Change your floats to inline-block. Floats have just one valid purpose in the modern web, and that's to get text to wrap around images or other media containers. Don't use them for structural layout.

The center tag is deprecated.. Don't use it. You don't need centering there anyway.

See my CSS comments for other tips. Always strive to use as little as possible by testing each rule in the browser before you wrap up your project.

.imgContainer {
  display: inline-block;
  /* position: relative; not needed */
  width: 17%;
}

img {
  max-height: 90%;
  max-width: 90%;
}

body {
  /* width: 100%; not needed */
  /* margin-left: auto; not needed */
  /* margin-right: auto; not needed */
}

html {
  /* text-align: center; not needed */
}

.new_line {
  clear: both;
}

.collapsible {
  background-color: #eee;
  color: #444;
  cursor: pointer;
  padding: 18px;
  width: 75%;
  border: none;
  text-align: left;
  outline: none; /* be sure you understand the accessibility implications of this */
  font-size: 15px;
  margin-bottom: 10px;
}

.content {
  padding: 0 18px;
  overflow: hidden;
  text-align: center; /* better here than the entire HTML document */
}

<div class="content">
  <h4>Heading</h4>
  <div class="imagetuple">
    <div class="imgContainer">
      <img src="https://www.imgonline.com.ua/examples/random-pixels-big.png" />
      <p>IMG1</p>
    </div>
    
    <div class="imgContainer">
      <img src="https://www.imgonline.com.ua/examples/random-pixels-big.png" />
      <p>IMG2</p>
    </div>
    
    <div class="imgContainer">
      <img src="https://www.imgonline.com.ua/examples/random-pixels-big.png" />
      <p>IMG3</p>
    </div>
    
    <div class="imgContainer">
      <img src="https://www.imgonline.com.ua/examples/random-pixels-big.png" />
      <p>IMG4</p>
    </div>
    
    <div class="imgContainer">
      <img src="https://www.imgonline.com.ua/examples/random-pixels-big.png" />
      <p>IMG5</p>
    </div>
  </div>
</div>

---

Related Topics