Aquí hay un diseño de cuadrícula CSS de 3 columnas y 3 filas de CSS Tricks Responsive Holy Grail que estoy tratando de adaptar de la siguiente manera:

• El encabezado y el pie de página permanecen en la parte superior e inferior y abarcan 1 fila y 3 columnas.
• En ancho completo, la barra lateral izquierda y la barra lateral derecha aparecen a ambos lados del artículo.
• En el primer punto de interrupción, tablet/768px, la barra lateral derecha debe ocultarse y deslizarse de derecha a izquierda en el botón de alternancia del lado derecho. La segunda fila solo mostraría la barra lateral izquierda y el artículo.
• En el segundo punto de interrupción, mobile/380px, la barra lateral izquierda debe ocultarse y deslizarse de izquierda a derecha en el botón de alternar ls. La segunda fila solo mostraría el artículo.

Me doy cuenta de que esto probablemente esté en el orden incorrecto para el diseño móvil primero, pero parecía más fácil de explicar de lo conocido a lo desconocido.

En el diseño a continuación, el encabezado y el pie de página no están anclados en la parte superior e inferior y con el artículo que se extiende para llenar toda la altura. Además, por supuesto, ambos paneles laterales se apilan en los puntos de ruptura en lugar de ocultarse como se desea. Supongo que se requerirán consultas @media y/o JS para hacer esto.

 .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>