为什么我的css网格重叠？

Question

我在网站上使用css网格。

grid-container{
    display:grid;
    grid-template-areas: 'header header header'
                      'left main right'
                      'dummy code dummy';
    grid-template-columns: 144px auto 144px;
    grid-column-gap: 16px;
    grid-row-gap: 16px;
}

这就是我定义header，main和code的方法：

.header{
    grid-area: header;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color:rgb(203, 240, 240);
    height:114px;
}
.main{
    grid-area: main;
}
.code{
    grid-area: code;
}

现在，当我为标题，主要代码和代码部分创建div时，我不知道为什么main和代码div重叠。

Answer 1

问题在于您如何分配grid-area。将相同的元素分配给多个网格区域是无效的。

看看以下示例。它是对上面包含的代码的修改。请注意每个网格项在网格中的放置方式是唯一的。

.grid-container{
    display:grid;
    grid-template-areas: 'header header header'
                         'left main right'
                         'dummy1 code dummy2';
                        
    grid-template-columns: 144px auto 144px;
    grid-column-gap: 16px;
    grid-row-gap: 16px;
}
.header{
    grid-area: header;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color:rgb(203, 240, 240);
    height:114px;
}
.main{
    background-color: silver;
    grid-area: main;
}
.code{
    grid-area: code;
    background-color: yellow;
}
.dummy {    
    background-color: lightblue;
}

.left {
    grid-area: left;
}

.right {
    grid-area: right;
}

.dummy-1 {
    grid-area: dummy1;
}

.dummy-2 {
    grid-area: dummy2;
}

/* Added only for the sake of this example */
.main,
.code,
.dummy {
    min-height: 50px;
}

<div class="grid-container">
  <div class="header">Header</div>
  <div class="main">Main</div>
  <div class="left">Left</div>
  <div class="right">Right</div>
  <div class="code">Code</div>
  <div class="dummy dummy-1">Dummy 1</div>
  <div class="dummy dummy-2">Dummy 2</div>
</div>

https://jsfiddle.net/198f3f0o/