<header class="main-header">Header</header> <main class="content">Main content goes here</main> <aside class="primary-sidebar">Sidebar (left)</aside> <aside class="secondary-sidebar">Sidebar (right)</aside> <footer class="main-footer">Footer</footer>
* { padding: 0; margin: 0; } body { font-size: 1.2em; text-align: center; height: 100vh; display: grid; grid-template-columns: 20% 1fr 20%; grid-template-rows: auto 1fr auto; grid-template-areas: "header header header" "sidebar-pri content sidebar-alt" "footer footer footer"; } .main-header { background: red; grid-area: header; } .main-footer { background: red; grid-area: footer; } .primary-sidebar, .secondary-sidebar { background: turquoise; } .primary-sidebar { grid-area: sidebar-pri; } .secondary-sidebar { grid-area: sidebar-alt; } .content { background: green; grid-area: content; }