Layout combining two CSS Grids

Question

I'm working on a assignment in which I want to make two groups of css-grids mixed with each other like this:

I'm using the following code

.group1 .item1 {
  grid-column: 1 / 4;
}

.group1 .item2 {
  grid-column: 1;
}

.group1 .item3 {
  grid-column: 2 / 4;
}

.group2 .item4 {
  grid-column: 2 / 3;
}

.group2 .item5 {
  grid-column: 3 / 4;
}

.group2 .item6 {
  grid-column: 2 / 4;
}
.container {
  display: grid;
  grid-gap: 5px;
  max-width: 1200px;
  margin: 0 auto 100px auto;
  border: 8px dashed #999;
}

<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>

I'm expecting the output to be like the [image] attached WITHOUT CHANGING HTML but I'm unable to get that output, please help me, I shall be very thankful to you for this act of kindness.

Im expecting that your assigner is expecting you to use nested grids — Dev Man, May 25 '19 at 22:14
@ImmortalDude Yes Exactly My Assign Question is **create the Part 5 Layout using nested grids** Can you help please ? — Jamie Southwell, May 25 '19 at 22:44

score 2 · Accepted Answer · edited Jun 20 '20 at 09:12

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>

https://css-tricks.com/get-ready-for-display-contents/

—a magical new display value that essentially makes the container disappear, making the child elements children of the element the next level up in the DOM.

from your code, it could be a short code update :

/*update */
.container {
  display: contents
}

.part5 {
/* end update */
  display: grid;
  grid-gap: 5px;
  max-width: 1200px;
  margin: 0 auto 100px auto;
  border: 8px dashed #999;
}

  .group1 .item1 {
  grid-column: 1 / 4;
}

.group1 .item2 {
  grid-column: 1;
  grid-row: 2/5;
}

.group1 .item3 {
  grid-column: 2 / 4;
}

.group2 .item4 {
  grid-column: 2 / 3;
}

.group2 .item5 {
  grid-column: 3 / 4;
}

.group2 .item6 {
  grid-column: 2 / 4;
}

.container {
  display: contents
}

.part5 {
  display: grid;
  grid-gap: 5px;
  max-width: 1200px;
  margin: 0 auto 100px auto;
  border: 8px dashed #999;
}


/*demo*/

div {
  box-shadow: 0 0 0 2px lightgray;

<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>

The rough way is to set both groups on the same grid overlapping them :

.container {
  display: grid;
  width: 100%;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: repeat(4, 1fr);
}

.group1 {
  grid-row: 1 / span 4;
  grid-column: 1 / span 6;
}

.group2 {
  grid-template-rows: repeat(2, 1fr);
  grid-column: 3 /span 4;
  grid-row: 3 /span 3;
}

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

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

.item3 {
  grid-column: 3 / span 4;
  color: green;
}

.item4 {
  grid-column: 1 /span 3;
  grid-row: 1;
}

.item5 {
  grid-column: 4/span 3;
  color: brown;
}

.item6 {
  grid-column: 1/ span 6;
  color: purple;
}


/* demo*/

[class^=item] {
  border: solid;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: calc(2vh + 2vw);
  background: lightgray;
  min-height:20vh
}

<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

I have to do this using css grid system Is there any other way to get the output like image using css grid ?? — Jamie Southwell, May 25 '19 at 21:28
@JamieSouthwell ?? it is using the grid system on the main container , follow the link to understand the use of display:contents here for the sub containers . — G-Cyrillus, May 25 '19 at 21:32
@JamieSouthwell tutorial about display:contents to allow use the grid system even if children are not direct child of the grid box : https://css-tricks.com/get-ready-for-display-contents/ (do not hesitate ask about what confuses you ) and a pen to play with : https://codepen.io/gc-nomade/pen/arGLBd — G-Cyrillus, May 25 '19 at 21:35
@JamieSouthwell any feedback ? are you allowed to use display:contents inside your grid or not , there is also an answer not using it but not as intuitive. — G-Cyrillus, May 25 '19 at 21:55
Sir, I have followed your pen and got the required output, but I'm confused about this line of code `.container.group1, .container.group2 { display: contents;}` my assign question is **create the Part 5 Layout using nested grids** — Jamie Southwell, May 25 '19 at 22:38
Sir Although Thank you so much for your precious time, GOD BLESS YOU — Jamie Southwell, May 25 '19 at 22:41

score 1 · Answer 2 · edited Jan 03 '22 at 11:59

.container{
  display: grid;
  grid-template-columns: repeat(6,auto);
  grid-gap: 5px;
  grid-template-areas: 
  'item1 item1 item1 item1 item1 item1'
  'item2 item2 item3 item3 item3 item3'
  'item2 item2 item3 item3 item3 item3'
  'item2 item2 item4 item4 item5 item5'
  'item2 item2 item4 item4 item5 item5'
  'item2 item2 item6 item6 item6 item6'
  ;
}
.box{
  border: 2px solid black;
  background-color: lightblue;
  padding: 10px;
  border-radius: 12px;
  text-align: center;
}
#item1{
  grid-area: item1;
}
#item2{
  grid-area: item2;
}
#item3{
  grid-area: item3;
}
#item4{
  grid-area: item4;
}
#item5{
  grid-area: item5;
}
#item6{
  grid-area: item6;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    
</head>
<body>
    <div class="container">
        <div class="box" id="item1">item-1</div>
        <div class="box" id="item2">item-2</div>
        <div class="box" id="item3">item-3</div>
        <div class="box" id="item4">item-4</div>
        <div class="box" id="item5">item-5</div>
        <div class="box" id="item6">item-6</div>
    </div>
</body>
</html>

As it’s currently written, your answer is unclear. Please [edit] to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers [in the help center](/help/how-to-answer). — Community, Dec 31 '21 at 22:58

Michael Benjamin · Answer 3 · 2019-05-25T22:40:30.380

`display: subgrid`

A clean and efficient way to solve this problem would be to use display: subgrid, which is a CSS Grid feature designed specifically for these sorts of layouts. Subgrids allow nested grid containers to recognize the grid lines of the primary grid container.

Unfortunately, this feature is not available yet. More details here:

Positioning content of grid items in primary container (subgrid feature)

`grid-template-areas`

Another clean and efficient way to solve the problem would be to make the primary container (.part5.container) a grid container, then arrange both child containers in the shape that you need using grid-template-areas.

Unfortunately, this feature is also not available yet. More details here:

grid-template-areas with ASCII art is not working

A possible solution

So here's a solution using CSS Grids and (to compensate for the missing features listed above) a little bit of absolute positioning. No changes to the HTML.

.part5.container {
  display: grid;
  border: 8px dashed #999;
  height: 100vh;
  grid-template-rows: auto auto;
  grid-template-columns: 35% 1fr;
  grid-template-areas: " group1 group1 " 
                       "   .    group2 ";
}

.container.group1 {
  grid-area: group1;
  display: grid;
  grid-template-rows: 50px 1fr;
  grid-template-columns: 35% 1fr;
  grid-gap: 5px;
  position: relative;
}

.item1 {
  grid-column: 1 / -1;
}

.item2 {
  position: absolute;
  top: 55px;  /* top row height plus gap */
  width: 35%; /* first column width */
  height: calc(100vh - 71px); /* minus height of top row (50px) plus borders (16px)) */
}

.item3 {
  grid-column: 2;
}

.container.group2 {
  grid-area: group2;
  display: grid;
  grid-template-rows: 1fr 50px;
  grid-template-columns: 1fr 1fr;
  grid-gap: 5px;
  margin: 5px 0 0 5px;
}

.item6 {
  grid-column: 1 / -1;
}

.item {
  background-color: lightgreen;
  display: flex;
  align-items: center;
  justify-content: center;
}

body {
  margin: 0;
}

* {
  box-sizing: border-box;
}

<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>

Layout combining two CSS Grids

3 Answers3

display: subgrid

grid-template-areas

A possible solution

`display: subgrid`

`grid-template-areas`