Why my css grids are overlapping?

Question

I'm using css grid for my website.

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;
}

This is how I defined header, main and 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;
}

Now when I'm creating div for header, main and code part, I don't why main and code div's are overlapping.

Answer 1

The issue is with how you're assigning your grid-areas. It's invalid to assign the same element to multiple grid areas.

Have a look at the following example. It's a a modification of the code you've included above. Notice how each grid item is unique in how it's placed in the grid.

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