结合两个 CSS 网格的布局

Question

我正在做一个任务，我想让两组 css-grids 像这样相互混合：

我正在使用以下代码

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

我希望输出类似于附加的 [图片] 不更改 HTML 但我无法获得该输出，请帮助我，我将非常感谢你善举。

Answer 1

您可以使用 display:contents 来避免子容器妨碍您，并使用显示网格和网格区域 (grid-row/grid-column) 来调度您的元素。

但这还不是无处不在！

想法的演示

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

——一个神奇的新显示值，它本质上使容器消失，使元素的子元素在 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

Answer 2

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

Answer 3

display: subgrid

解决此问题的一种简洁有效的方法是使用display: subgrid，这是专为此类布局设计的 CSS 网格功能。子网格允许嵌套的网格容器识别主网格容器的网格线。

很遗憾，此功能尚不可用。更多细节在这里：

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

---

grid-template-areas

解决此问题的另一种干净有效的方法是将主容器 (.part5.container) 设为网格容器，然后使用 grid-template-areas 将两个子容器排列成您需要的形状。

很遗憾，此功能目前还不可用。更多细节在这里：

• grid-template-areas with ASCII art is not working

---

一个可能的解决方案

所以这是一个使用 CSS 网格和（以弥补上面列出的缺失功能）一点点绝对定位的解决方案。 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>