<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>grid布局第三遍</title> </head> <style> * { margin: 0; padding: 0; } .content { 100%; height: 100vh; display: grid; grid-template-rows: 80px 40px auto 40px; grid-template-columns: 160px repeat(3, 1fr); grid-template-areas: 'aside header header header' 'aside nav nav nav' 'aside main main main' 'aside footer footer footer'; } header { background-color: aqua; grid-area: header; } aside { background-color: aquamarine; grid-area: aside; } nav { background-color: bisque; grid-area: nav; } main { background-color: #fff; grid-area: main; } footer { background-color: blueviolet; grid-area: footer; } </style> <body> <section class="content"> <header></header> <aside></aside> <nav></nav> <main></main> <footer></footer> </section> </body> </html>