<!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 {
width: 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>
