<body class="grid-12">
<header class="grid-element bg-gray grid-header">Шапка сайта</header>
<aside class="grid-element bg-red grid-aside">Сайдбар</aside>
<main class="grid-element bg-blue grid-main">Основной контент</main>
</body>
body {
margin: 0;
font-family: sans-serif;
}
.grid-12 {
display: grid;
grid-template-columns: repeat(12, 1fr);
grid-template-rows: repeat(12, 1fr);
height: 100vh;
}
.grid-element {
padding: 5px;
font-size: 14px;
color: #fff;
}
.bg-gray {
background: #717790;
}
.bg-red {
background: #ff3c41;
}
.bg-blue {
background: #0ebeff;
}
.grid-header {
grid-column: 1 / -1;
grid-row: 1 / 3;
}
.grid-aside {
grid-column: 1 / 5;
grid-row: 3 / -1;
}
.grid-main {
grid-column: 5 / -1;
grid-row: 3 / -1
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.