CSSでflexではなくgridを使用してfooterを一番下に配置

gridを使用してfooterを一番下に配置

以前「CSSでフッターをウィンドウ最下部にabsoluteで固定してはダメ」という記事でfooterをflexで一番下に配置する方法を記事にしたことがある。

現在ではIE11を対象外にするWebサイトではgridを使用するケースが多くなっているため、そのやり方について説明する。

まずbodyまたはheader, main, footerの親要素に以下のプロパティを追加する。

<body>
  <div class="header">header</div>
  <div class="main">main</div>
  <div class="footer">footer</div>
</body>

body {
  display: grid;
  grid-template-rows: auto 1fr auto;
  height: 100vh;
}

完