Photo by
inagakijunya
#45 そろそろCSS GRID使ってみる【ぴよぴよコーダーの開発日記】
使いどころがいまいちわからないまま、すっかりflex三昧な日々を過ごしていますが、久々に外枠を作りたいと思ったのでCSS GRIDに手を出してみた。
CSS gridの基本とよくある失敗例
まずは、デモ
HTMLはこんな感じ
<body>
<header><h1>title</h1></header>
<main><p>This is a test.</p></main>
<footer><small>copyright</small></footer>
</body>CSSはこんな感じ
body {
display: grid;
grid-template-rows: 50px 1fr 60px;
min-height: 100vh;
}
header {
border-bottom: 1px solid #999;
}
footer {
border-top: 1px solid #999;
}grid-template-rowsというのは、縦方向（行）の指定。横（列）の指定をしたいときは、grid-template-column。50px 1fr 60pxは、行の1番目が50pxのheight、3番目は60px、2番目の1fr の fr とは何の単位かというと(a fraction)の略。つまりは分数。1/1ですよ。とのこと。flex:1になんか似てる。平たく言うと、1番上の行（header）がheightが50px、2番目のheightは、絶対指定はなく1/1、3番目の行（footer）は60px。
bodyに、min-height: 100vhを入れているのは、コンテンツ領域の高さがなくてもフッターを最下部に設置したいから。
PCでは、いい感じに見えたのですが、SPでは100vhが効いていないのか、スクロールバーが出てしまいます。結論的に言うと、100vhが効いていないのではなく、iPhoneのSafariやAndroidのChromeなど一部の環境ではツールバーやアドレスバーの高さも含まれてしまうとのこと。その問題に対する解決方法が下記のJSで直す方法 ↓
CSS gridでコンテンツの高さが足りないときにfooterを下部に設置（JSでやる場合）
成功したデモ
bodyの100vhを削除する
下記のようにJSでinnerHeightを取得してbodyにセットする
$('body').css('height',$(window).height());参考：スマホで100vhを使うと、アドレスバーの高さ分はみでてしまう
CSS gridでコンテンツの高さが足りないときにfooterを下部に設置（スクロールしなくていい場合は、CSSだけでできる）
よく見るコードですが、htmlとbodyにheight:100%をつけるやり方
html,body { height:100%; }