<!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: repeat(2, 40px 20%); grid-template-rows: repeat(4, 25%); grid-row-gap: 10px; grid-column-gap: 10px; } header, footer, .sidebar, main { box-sizing: border-box; } header { grid-area: 1 / 1 / span 1 / span 8; background: #ddd; } footer { grid-row: 4 / 5; grid-column: 1 / 9; background: #aaa; } .sidebar { grid-row-start: 2; grid-row-end: span 2; grid-column-start: 1; grid-column-end: 3; background: #888; } main { grid-area: 2 / 3 / 4 / 9; background: #ccc; }