<!DOCTYPE html> <html><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1"> <title>Grid Layout</title> <style media="all" type="text/css"> html, body, #site { width: 100%; height: 100%; margin: 0; padding: 0; } #site { display: grid; grid-template-columns: 2fr 1fr 1fr; grid-template-rows: auto 1fr 3fr; grid-template-areas: "title title title" "main aside nav" "main aside footer"; } #site > header { grid-area: title; background: #A0A0C0; } #site > nav { grid-area: nav; background: #A0C0A0; } #site > main { grid-area: main; background: #C0A0A0; } #site > aside { grid-area: aside; background: #C0C0A0; } #site > footer { grid-area: footer; background: #C0C0C0; } @media screen and (min-width: 34em) { #site { grid-template-columns: 2fr 1fr 1fr; grid-template-areas: "title title nav" "main main aside" "main main footer" } } </style> </head><body> <div id="site"> <header><h1>This an header</h1></header> <nav> Navigation </nav> <main> Contents </main> <aside> Something </aside> <footer> Footer </footer> </div> </body></html>