Create full-width component area in Joomla! 4. It my implementation of an idea coming from my Super Joomler friend Marc DECHÈVRE

user.css

@supports (display: grid) {
  body:not(.has-sidebar-left) .site-grid .container-component {
    grid-column-start:span 6;
  }

  @media (min-width : 992px) {
    /* Must add page-has-full-width in menu item custom css class for page */
    body.site.page-has-full-width .site-grid {
      grid-template-areas : ". banner banner banner banner ." ". top-a top-a top-a top-a ." ". top-b top-b top-b top-b ." "comp comp comp comp comp comp" ". side-l side-l side-r side-r ." ". bot-a bot-a bot-a bot-a ." ". bot-b bot-b bot-b bot-b .";
    }
    body.site.page-has-full-width.has-sidebar-right .site-grid {
      grid-template-areas : ". banner banner banner banner ." ". top-a top-a top-a top-a ." ". top-b top-b top-b top-b ." "comp comp comp comp comp comp" ". side-r side-r side-r side-r ." ". bot-a bot-a bot-a bot-a ." ". bot-b bot-b bot-b bot-b .";
    }
    body.site.page-has-full-width.has-sidebar-left .site-grid {
      grid-template-areas : ". banner banner banner banner ." ". top-a top-a top-a top-a ." ". top-b top-b top-b top-b ." "comp comp comp comp comp comp" ". side-l side-l side-l side-l ." ". bot-a bot-a bot-a bot-a ." ". bot-b bot-b bot-b bot-b .";
    }
  }
}