【CSS】グリッドレイアウトでbodyにdisplay:gridを指定するのはありなのか

CSSグリッドレイアウト

グリッドレイアウトで良くあるcontainerではなくbodyにdisplay:gridを定義するのはありなのだろうか

HTML

<body>
<header></header>
<nav></nav>
<main></main>
<div id="side"></div>
<footer></footer>
</body>

CSS

body {
  font-family: "メイリオ", sans-serif;
  display: grid;
  grid-template-columns: 1fr 350px;
  grid-template-rows: 40px 40px 1fr 30px;
  grid-gap: 0px;
  grid-template-areas:
    "head head"
    "menu menu"
    "main side"
    "foot foot";
}

header{grid-area: head;}
#menu{grid-area: menu;}
main{grid-area: main;}
#side{grid-area: side;}
footer{grid-area: foot;}

ちょっと気になったので少し見てみると

やはりグリッドレイアウトの紹介記事ではcontainer(div)に指定しているものも多いですが、海外サイトでは結構bodyにdisplay: gridを指定しているものもありますね

支障はないのか、というとどうだろうか

body内にはスクリプトなど視覚的なもの以外のコードも入れる可能性もありますが、まあコンテンツ内にjavascript埋める事はありますしね

検索エンジンの評価が悪くなるなら避けるべきですがhttps://developers.google.com/の記事でもbodyにdisplay: grid;指定してますし問題なさそう

CSSグリッド – テーブルレイアウトが戻ってきました。 そこにいて正方形になろう。 | ウェブ| Google Developers(英語)

 

CSSグリッドレイアウト

Posted by Yousuke.U