見出し画像
Photo by inagakijunya

#45 そろそろCSS GRID使ってみる【ぴよぴよコーダーの開発日記】

em

使いどころがいまいちわからないまま、すっかり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を入れているのは、コンテンツ領域の高さがなくてもフッターを最下部に設置したいから。

参考：CSSでグリッドレイアウトをしてみよう-実践編

参考：grid-template-rows

参考：グリッドレイアウトの基本概念

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%; }

参考：スマホでツールバーやアドレスバーに隠れないように全画面表示させるCSS

この記事が気に入ったらサポートをしてみませんか？