I wanted to see if this layout ( / ) in wordpress gutenberg because I need this "trick" in a layout where I work on.

But to my surprise I see that there is no overlapping in wordpress 6.7.2 See this image:

Does anyone how I can solve this ?

I wanted to see if this layout ( https://gridbyexample/examples/example22/ ) in wordpress gutenberg because I need this "trick" in a layout where I work on.

But to my surprise I see that there is no overlapping in wordpress 6.7.2 See this image:

Does anyone how I can solve this ?

• css
• block-editor

• If you're asking how to do this with just the editor and the browser then you're better off asking on the support forums as this stack is intended for programmers. Otherwise overlapping might not be available in gutenberg, but this could be different in the future. For now add classes to the blocks in the advanced section of the block inspector and write CSS code to implement the overlapping. Also keep in mind when I open the example you linked to the content div is innaccessible/hidden entirely making it impossible to see or edit – Tom J Nowell ♦ Commented Mar 12 at 16:39
• I have add all the classes and checked if the html is also the same – Roelof Wobben Commented Mar 12 at 16:41
• that may be true but the example codepen has only that HTML and CSS and nothing else, the editor will add styles and its own layout rules that you need to account for, that's going to require you to do some standard CSS inspection and adjustment – Tom J Nowell ♦ Commented Mar 12 at 17:01
• I know, I also tried to make everything !important but also no luck. Furthermore I do not have a idea what to change – Roelof Wobben Commented Mar 12 at 17:08

1 Answer 1

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.