CSSのgrid layoutを使って画面を縦に分割する

自分は基本的にはバックエンドエンジニアなんですが、GWだし時間あるしフロントエンドも触ってみようかなと思って触ってみました。

CSSとかほぼ初めて触ったので、初心者が躓くところすべてに躓いてる感あるので、もう躓かないように備忘録がてら記事にしておきます。（なので、初心者丸出しの記事になります）

やりたいこと#

こんな感じで、画面の領域を上下に分割したいのです。

実現方法#

基本方針#

表題の通りgrid layoutを使用します。grid layoutは2次元のレイアウトをするための機能で、 $n$ 行 $m$ 列に画面を分割できます。

なので、この機能を使って画面を2行1列に分割してやります。

まずは、下記のようなhtmlファイルを用意します。

1
<!DOCTYPE html>
2
<html lang="ja">
3
  <head>
4
    <meta charset="utf8">
5
    <link rel="stylesheet" type="text/css" href="sample.css">
6
    <title>sample html</title>
7
  </head>
8
  <body>
9
    <div class="grid-area">
10
      <div class="top-area">
11
        Top
12
      </div>
13
      <div class="bottom-area">
14
        Bottom
15
      </div>
16
    </div>
17
  </body>
18
</html>

そして、このようなCSSを用意してやると、上側と下側が8:2の割合で分割されると思います。

1
.grid-area {
2
  display: grid;
3
  height: 100vh;                /* grid全体の高さを設定 */
4
  grid-template-rows: 80% 20%;  /* gridの割合が8:2になるよう2行用意 */
5
  grid-template-columns: 100%;  /* 横幅いっぱいに1列用意 */
6
}
7

8
.top-area {
9
  grid-row: 1;
10
  grid-column: 1;
11
}
12

13
.bottom-area {
14
  grid-row: 2;
15
  grid-column: 1;
16
}

こんな感じで8:2で領域が分割されます。

上側部分だけスクロールさせたい場合#

さて、上記が基本となるのですが、このままですと上側部分に表示すべきコンテンツが増えてきた場合、このように下側部分まではみ出してきてしまいます。

これを解決するために、コンテンツがはみ出した場合、上側部分のみスクロールするようにしてみます。先ほどのCSSにoverflow-y: scrollを追加してやるだけです。

1
.grid-area {
2
  display: grid;
3
  height: 100vh;
4
  grid-template-rows: 80% 20%;
5
  grid-template-columns: 100%;
6
}
7

8
.top-area {
9
  grid-row: 1;
10
  grid-column: 1;
11
  overflow-y: scroll; /* これを追加。縦方向にコンテンツがあふれた場合スクロール可能として処理する */
12
}
13

14
.bottom-area {
15
  grid-row: 2;
16
  grid-column: 1;
17
}

すると、下記のように下側にはみ出した場合は自動で上側部分のみスクロールするようになります。

参考： CSS Grid Layout を極める！（基礎編） #CSS3 - Qiita