html - 结合两个 CSS 网格的布局

Question

我正在做一项作业，我想将两组 css 网格像这样相互混合:

我正在使用下面的代码

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

我希望输出像附加的 [image] WITHOUT CHANGING HTML 但我无法获得该输出，请帮助我，对此我将非常感谢善举。

Answer 1

您可以使用 display:contents 来避免子容器的出现，并使用显示网格和网格区域(网格行/网格列)来调度您的元素。

但这还不是到处都有效!

想法的演示

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

根据您的代码，它可能是一个简短的代码更新:

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

粗略的方法是将两个组设置在与它们重叠的同一网格上:

.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