Finding a way to properly implement <main> tag in this layout

Question

I'm laying out HTML for a project, and as you can see on the joined picture, I have an issue about properly implementing <main> tag.

My layout has a content header above the sidebar and content, which prevents me from keeping the sidebar outside the main tag.

Would someone have a solution?

I tried having the sidebar code below the content in the HTML structure, and display it as shown in the picture with flexbox reverse row, but as soon as I wrap what I want inside a <main> semantic tag, everything breaks.

Answer 1

Use display: contents; to stop the main element having any effect on layout. Then layout its children as if they were siblings of main instead of children of it.

body {
  background: black;
  display: grid;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
  grid-template-areas: "header header header" "content-header content-header content-header" "sidebar content content";
  margin: 0;
  padding: 0;
  height: 100vh;
}

header {
  background: #aaf;
  grid-area: header;
}

main {
  display: contents;
}

main header {
  background: #faa;
  grid-area: content-header;
}

main #content {
  background: #afa;
  grid-area: content;
}

aside {
  background: #aff;
  grid-area: sidebar;
}

<header>
  header
</header>
<main>
  <header>
    content header
  </header>
  <div id="content">
    content
  </div>
</main>
<aside>
  sidebar
</aside>