logo标签列表

两个CSS网格布局的组合布局

htmlcsscss-grid
3
我正在处理一个任务，希望将两组css网格混合到一起，如下图所示：Image。我使用了以下代码： 

.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]图片一样不改变HTML，但是我无法得到那样的输出结果，请帮帮我，如果您能帮忙，我将非常感激。

你说的是作业吗？还是指派任务？ - Bman70
我希望你的指派人期望你使用嵌套网格。 - Dev Man
@ImmortalDude 是的，我的作业问题是使用嵌套网格创建第5部分布局。你能帮忙吗？ - Jamie Southwell
3个回答
2
你可以使用 display: contents 来避免子容器干扰，然后使用 display grid 和 grid-area (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

我必须使用CSS网格系统来完成这个任务。 除了使用CSS网格，还有其他方法可以实现像图片一样的输出吗？ - Jamie Southwell
@JamieSouthwell，它在主容器上使用网格系统，点击链接了解子容器中display:contents的用法。 - G-Cyrillus
@JamieSouthwell的教程介绍了如何使用display:contents属性，即使子元素不是网格容器的直接子元素也可以使用网格系统：https://css-tricks.com/get-ready-for-display-contents/（如果有任何疑问，请随时提问），还有一个可以玩耍的代码片段：https://codepen.io/gc-nomade/pen/arGLBd - G-Cyrillus
@JamieSouthwell 有反馈吗？你可以在网格中使用display:contents吗？还有一种不使用它的答案，但不够直观。 - G-Cyrillus
先生，我已经按照您的笔迹得到了所需的输出，但是我对这行代码感到困惑： .container.group1, .container.group2 { display: contents;} 我的任务是使用嵌套网格创建第5部分布局。 - Jamie Southwell
先生，非常感谢您宝贵的时间，愿上帝保佑您。 - Jamie Southwell
1

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

目前你的回答不够清晰，请[编辑]以添加更多细节，帮助其他人理解它如何回答问题。你可以在帮助中心找到有关如何编写好答案的更多信息。 - Community
0

display: subgrid

解决这个问题的一种干净高效的方法是使用 display: subgrid，这是一个专门为这些布局设计的 CSS Grid 功能。子网格允许嵌套的网格容器识别主网格容器的网格线。

不幸的是，这个功能目前还不可用。更多细节请参见：

grid-template-areas

另一种干净高效的解决方法是将主容器（.part5.container）设为网格容器，然后使用 grid-template-areas 将两个子容器排列成所需的形状。

不幸的是，这个功能目前还不可用。更多细节请参见：

一种可能的解决方案

这里提供了一种使用CSS Grids和（为弥补上述缺失功能）少量绝对定位的解决方案。无需更改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>

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接