56 lines
955 B
HTML
56 lines
955 B
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<style>
|
|
.container {
|
|
display: grid;
|
|
grid-gap: 5px;
|
|
grid-template: auto / 1fr 3fr 1fr;
|
|
background: lightyellow;
|
|
}
|
|
|
|
.subgrid {
|
|
display: grid;
|
|
grid: subgrid / subgrid;
|
|
}
|
|
|
|
header, aside, section, footer {
|
|
background: lightblue;
|
|
font-family: sans-serif;
|
|
font-size: 3em;
|
|
}
|
|
|
|
header, footer {
|
|
grid-column: span 3;
|
|
}
|
|
|
|
main {
|
|
grid-column: span 3;
|
|
}
|
|
|
|
.aside1 {
|
|
grid-column: 1;
|
|
}
|
|
|
|
.aside2 {
|
|
grid-column: 3;
|
|
}
|
|
|
|
section {
|
|
grid-column: 2;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="container">
|
|
<header class="subgrid">Header</header>
|
|
<main class="subgrid">
|
|
<aside class="aside1 subgrid">aside</aside>
|
|
<section>section</section>
|
|
<aside class="aside2 subgrid">aside2</aside>
|
|
</main>
|
|
<footer>footer</footer>
|
|
</div>
|
|
</body>
|
|
</html>
|