[Resolved] How to make content after header overlap header element

Our designer wants 3 boxes after the header element and overlapping it like so. I created a grid in the main content area and gave the wrapper a negative margin:

}
@media (min-width: 850px) {
.three-col-grid {
    display: grid;
    grid-auto-rows: 1fr;
    grid-template-columns: 1fr 1fr 1fr;
    margin-top: -45px;
    max-width: 1150px;
}
}

It works, but it feels a little bit dirty. Do you think, this is an acceptable approach? How would you do it? Please, enjoy your easter monday. This post is by no means important.

Thanks, Mike