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.

Answer 1

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