<div class="grid">
<header class="grid__header">ヘッダー</header>
<main class="grid__main">メイン</main>
<aside class="grid__side">サイド</aside>
<footer class="grid__footer">フッター</footer>
</div>
.grid {
display: grid;
grid-template-columns: 1fr 320px;
}
.grid__header {
background: #f8bbd0;
grid-column: 1 / 3;
grid-row: 1 / 2;
}
.grid__content {
}
.grid__main {
background: #d1c4e9;
grid-column: 1 / 2;
grid-row: 2 / 3;
}
.grid__side {
background: #e6ee9c;
grid-column: 2 / 3;
grid-row: 2 / 3;
}
.grid__footer {
background: #b2ebf2;
grid-column: 1 / 3;
grid-row: 3 / 4;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.