<p>グリッドにアイテム(HTML要素)を配置する</p>
<div class="container">
  <header class="header"><p>ヘッダー</p></header>
  <main class="contains"><p>メイン</p></main>
  <aside class="menu"><p>メニュー</p></aside>
  <footer class="footer"><p>フッター</p></footer>
</div>
.container {
  display: grid;
  /* 2つの列トラックを定義する */
  grid-template-columns: 1fr 200px;
  /* 3つの行トラックを定義する */
  grid-template-wows: 80px 1fr 80px; 
}
/* ヘッダー */
.header {
  background: #FFB6C1;
}
/* メイン */
.contains {
  background: #FFCC7E;
}
/* メニュー */
.menu {
  background: #CBC3E3;
}
/* フッター */
.footer {
  background: #87CEEB;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.