css grid 布局

<!DOCTYPE html>

<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>TEST</title>
<style>
.header {
grid-area: h;
background-color:red;
}

.menu {
grid-area: m;
background-color: blue;
}

.content {
grid-area: c;
background-color: red;
}

.footer {
grid-area: f;
background-color: green;
}
.wrapper {
display: grid;
grid-template-columns: 200px 200px 200px;
grid-template-rows: 50px 50px;

}

.container {
display: grid;
grid-gap: 5px;
grid-template-columns: repeat(12, 1fr);
grid-template-rows: 50px 800px 50px;
grid-template-areas: "h h h h h h h h h h h h" "m m c c c c c c c c c c" "f f f f f f f f f f f f";
}
</style>
</head>
<body>
@*<div class="wrapper">
<div style=" background-color: red;">1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
</div>*@

<div class="header">HEADER</div>

<div class="content">CONTENT</div>

<div class="footer">FOOTER</div>

</div>
</body>
</html>