Grid

@supports (display:grid) {
    .site-grid {
        display:grid
        grid-gap: 0 1em;
        grid-template-columns:
            [full-start] minmax(0,1fr)
            [main-start] repeat(4,minmax(0,19.875rem))
            [main-end] minmax(0,1fr) [full-end];
        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 ."
            ". side-r side-r side-r side-r ."
            ". side-l side-l side-l side-l ."
            ". bot-a bot-a bot-a bot-a ."
            ". bot-b bot-b bot-b bot-b .";
    }
    .site-grid > [class^=container-],
    .site-grid > [class*=\ container-] {
      column-gap: 1em;
      width: 100%;
      max-width: none
    }
    .site-grid > .full-width {
      grid-column: full-start/full-end
    }
    @media (width>=992px) {
      .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 ."
            ". side-l comp comp side-r ."
            ". bot-a bot-a bot-a bot-a ."
            ". bot-b bot-b bot-b bot-b ."
      }
    }
  }
  body:not(.has-sidebar-left) .site-grid .container-component {
    grid-column-start: main-start;
  }
  body:not(.has-sidebar-right) .site-grid .container-component {
    grid-column-end: main-end;
  }
  .container-component {
    grid-area: comp;
    grid-column-start: comp;
  }
  .container-sidebar-right {
    grid-area: side-r;
  }
  ...