结合两个 CSS 网格的布局

问题描述 投票：0回答：4

我正在做一项作业，我想将两组 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>

我希望输出像所附的[图片]一样无需更改HTML但我无法获得该输出，请帮助我，我将非常感谢您的这一善举。

html css css-grid
4个回答
2
投票

您可以使用 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/

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

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>

0
投票

display: subgrid

解决此问题的一种干净有效的方法是使用 

display: subgrid
，这是专门为此类布局设计的 CSS 网格功能。子网格允许嵌套网格容器识别主网格容器的网格线。

不幸的是，此功能尚不可用。更多详情请点击这里：

grid-template-areas

解决该问题的另一种干净有效的方法是将主容器 (

.part5.container
) 设为网格容器，然后使用 
grid-template-areas
将两个子容器排列为您需要的形状。

不幸的是，此功能目前还无法使用。更多详情请点击这里：

一个可能的解决方案

因此，这里有一个使用 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>

0
投票
I was working on practicing the grid and for the layout you have shared I came up with below code:

HTML：

    <div class="grid-container">
  <div class="each-grid-item grid-item-1">1</div>
  <div class="each-grid-item grid-item-2">2</div>
  <div class="each-grid-item grid-item-3">3</div>
  <div class="each-grid-item grid-item-4">4</div>
  <div class="each-grid-item grid-item-5">5</div>
  <div class="each-grid-item grid-item-6">6</div>
</div>

CSS：

body {
    margin: 0;
    padding: 0;
    font-family: Trebuchet MS;
    background: #000;
}
.grid-container {
    display: grid;
        grid-template-columns: repeat(6, 1fr);
        grid-template-rows: repeat(6, 1fr);
        /* grid-template-rows: auto; */
    gap: 8px;   
}

.each-grid-item {
    text-align: center;
    align-content: center;
    padding: 30px;
    border: 2px solid red;
    background: darkblue;
    color: #fff;
    }

.each-grid-item:nth-child(odd){
    background: skyblue;
        color: #000;
}

.grid-item-1 {
    grid-column: 1/7;
    grid-row: auto;
}

.grid-item-2 {
    grid-column: 1/3;
    grid-row: 2/7;
}

.grid-item-3 {
    grid-column: 3/7;
    grid-row: 2/4;
}

.grid-item-4{
    grid-column: 3/5;
    grid-row: 4/6;
}

.grid-item-5{
        grid-column: 5/7;
        grid-row: 4/6;
}

.grid-item-6{
    grid-column: 3/7;
    grid-row: 6/7;
    
}
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.