<!DOCTYPE html>
|
<html lang="en">
|
<head>
|
<meta charset="UTF-8">
|
<title>Title</title>
|
<style>
|
.area {
|
background-color: yellow;
|
}
|
|
.grid {
|
display: grid;
|
|
grid-template-rows: 1fr 5fr 1fr;
|
|
gap: 2px;
|
|
grid-template-areas:
|
"navigation header header header"
|
"navigation content content content"
|
"footer footer footer footer"
|
}
|
|
.navigation {
|
grid-area: navigation;
|
}
|
|
.header {
|
grid-area: header;
|
}
|
|
.content {
|
grid-area: content;
|
}
|
|
.footer {
|
grid-area: footer;
|
}
|
</style>
|
</head>
|
<body>
|
<div class="grid">
|
<div class="area navigation">Navigation</div>
|
<div class="area header">Header</div>
|
<div class="area content">Content</div>
|
<div class="area footer">Footer</div>
|
</div>
|
</body>
|
</html>
|
