CSS Grid breakout for page title

Question

I am using a css grid (previously been using flexbox) and I am trying to work out how to break out of a css grid for my page title. My site structure looks like this:

Here is the css:

.site {
  column-gap: $sidebar-gap;
  display: grid;
  grid-template-columns: auto ($sidebar-width);   // site structure
  grid-template-rows: auto 1fr auto;              // sticky header & footer
  grid-template-areas:
    "header header"
    "main sidebar"
    "footer footer";
}

header {
  grid-area: header;
}

.site-main {
  grid-area: main;
}

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

footer {
  grid-area: footer;
}

My HTML structure looks like this:

body
└── div (#page .site)
    ├── header (#masthead .site-header)
    |   ├── div (.site-branding)
    |   |   ├── a (.logo)
    |   |   └── p (.site-description)
    |   ├── nav (#site-navigation .main-navigation)
    |   |   ├── button (.menu-toggle)
    |   |   ├── div (#menu-desktop-container .menu-desktop-container)
    |   |   └── div (#menu-mobile-container .menu-mobile-container)
    |   └── div (.head-search)
    |
    ├── main (#primary .site-main)
    |   └── article (.module)
    |       ├── div (.page-head)
    |       |   ├── h1 (.page-title)
    |       |   └── div (.page-meta)
    |       └── div (.page-content)
    |           └── <page content goes here>
    |
    ├── aside (#secondary .widget-area)
    |   └── <content> (section)
    |
    └── footer (#colophon .site-footer)
        ├── div (.footer-widgets)
        ├── nav (.footer-navigation)
        |   └── div (#menu-footer-container .menu-footer-container)
        └── div (.site-info)

What I am trying to achieve is the .page-head div to breakout of the css grid and span across the entire width of the page. From here I would like the sidebar (i.e. .widget-area) to commence below the .page-head. Typically in the past when using flexbox I would achieve this would using position: absolute on the .page-head which has a fixed height. I would then just add margin-top to the .widget-area to be the same as the .page-head site.

I tried this in CSS grid and this doesn't work. This is what I am trying to achieve visually:

I am not able to change the HTML structure - i.e. the obvious thing would be to move the sidebar (.widget-area) within main (.site-main), then this would be super easy to achieve. As this is a Wordpress theme, this is not possible.