<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>Grid</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" type="text/css" media="screen" href="./main.css" /> </head> <body> <div class="container"> <header></header> <section class="sidebar"></section> <main></main> <footer></footer> </div> </body> </html>
html, body { margin: 0; padding: 0; height: 100%; } .container { display: grid; height: 100%; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; } header, footer, .sidebar, main { padding: 20px; box-sizing: border-box; } header { background: #ddd; } footer { background: #aaa; } .sidebar { background: #888; } main { background: #ccc; }