Here is a CSS Tricks Responsive Holy Grail starter 3-column 3-row CSS grid layout which I am trying to adapt as follows:

• The header and footer remain top and bottom spanning 1 row and 3 columns.
• At fullwidth the left sidebar and right sidebar appear on either side of the article.
• At the first breakpoint, tablet/768px, the right sidebar should hide and slide right-to-left on right side toggle button. The second row would only show the left sidebar and the article.
• At the second breakpoint, mobile/380px, the left sidebar should hide and slide left-to-right on ls toggle button. The second row would only show the article.

I realize this is probably in the wrong order for mobile-first design but it seemed easier to explain from known to unknown.

In the layout below, the header and footer are not anchored top and bottom and with Article stretching to fill full height. Also, of course, both side panels stack at breakpoints rather than hide as desired. I'm guessing @media queries and/or JS will be required to do this.

.grid {
  display: grid;
  grid-template-columns: 150px auto 150px;
  grid-gap: 1em;
}

header,
footer {
  grid-column: 1 / 4;
}

@media all and (max-width: 700px) {
  aside,
  article {
    grid-column: 1 / 4;
  }
}


/* Demo Specific Styles */

body {
  margin: 0 auto;
  max-width: 56em;
  padding: 1em 0;
}

header,
aside,
article,
footer {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 25vh;
}

header,
footer {
  background: #bbb;
}

article {
  background: #FEF8DD;
}

.sidebar-left {
  background: #ACDDDE;
}

.sidebar-right {
  background: #CAF1DE;
}

<div class="grid">
  <header>Header</header>
  <aside class="sidebar-left">Left Sidebar</aside>
  <article>Article</article>
  <aside class="sidebar-right">Right Sidebar</aside>
  <footer>Footer</footer>
</div>