grid overlapping problem

It works without any problems for me. It looks like something (a plugin or theme) is using the same classes, which is overriding your CSS classes. Try wrapping your classes or update the classnames for testing.

.xyz-sidebar {
    grid-area: sidebar;
}

.xyz-content {
    grid-area: content;
}

.xyz-header {
    grid-area: header;
}

.xyz-wrapper {
    display: grid;
    grid-gap: 10px;
    grid-template-columns: 120px 120px 120px;
    grid-template-areas:
        'header  header  header'
        'sidebar content content';
    background-color: #fff;
    color: #444;
}

.xyz-box {
    background-color: #444;
    color: #fff;
    border-radius: 5px;
    padding: 20px;
    font-size: 150%;
}

.xyz-header {
    background-color: #999;
}

.xyz-overlay {
    background-color: red;
    z-index: 10;
    grid-column: content-start / content-end;
    grid-row: header-start / content-end;
}


<div class="custom-wrapper-class">
    <div class="xyz-wrapper">
        <div class="xyz-box xyz-header">Header</div>
        <div class="xyz-box xyz-sidebar">Sidebar</div>
        <div class="xyz-box xyz-content">Content</div>
        <div class="xyz-overlay">overlay</div>
    </div>
</div>

If this works, you will know.