<header class="o-header">Header</header> <aside class="o-aside">Aside</aside> <main class="o-main">Main</main> <footer class="o-footer">Footer</footer>
body { display: grid; grid-gap: 1rem; grid-template-areas: "header header header" "aside main main" "footer footer footer"; grid-template-columns: auto auto auto; grid-template-rows: auto 100vh auto; } .o-header { grid-area: header; } .o-aside { grid-area: aside; } .o-main { grid-area: main; } .o-footer { grid-area: footer; } .o-header, .o-aside, .o-main, .o-footer { background: #BC20E2; color: #FDFDFD; }