@keithjgrant The content starts in the same row as the 2nd header (it could do it on the first as well). Imagine where the 2nd header there's a non-dismissable error message, you wouldn't want it to start overlapped over the content, but upon scrolling you want it to scroll behind the error message. This is my rows.

[primary-header-bar] auto [secondary-header-bar content-start] auto [content] 1fr [secondary-footer-bar] auto [primary-footer-bar content-end] auto;
```typescriptreact

```

@callie If you put the error message in its own grid row, it should work. Something like this? https://codepen.io/keithjgrant/pen/zYMmXBj?editors=1100

Notice if you delete the contents of the error message, it collapses to height 0 and the main content takes that space.

@callie ah, so it's like semi-tranparent or doesn't fully hide the content behind?

In that case, I'm not sure there's a super clean way to do it, unfortunately. You'll have to either make a safe estimate of the height, or use JS to measure