CSS Grid Layout を試す

Posted on
CSS3 CSS Grid Layout

最近 CSS Grid Layout でページレイアウトを作る遊びをしているので、ひとつサンプルとしてアウトプットします。

作る物

小説投稿サイトの小説一覧ページを想定し、作者のプロフィールと小説を表示するページ。レスポンシブ。

PCで見た場合のイメージ

PCで見た場合のイメージ

スマホで見た場合のイメージ

スマホで見た場合のイメージ

構成の説明

このレイアウトは3層のグリッドでできています。 まず1層目はヘッダ・メイン・フッタの3行のグリッドです。

1層目

2層目はメイン領域をプロフィールと小説一覧に分ける2行のグリッド。実は3列構成で、小説一覧の左右の余白部分もグリッドで作成しています。

2層目

3層目はプロフィールと小説一覧それぞれの中身です。

プロフィールはPCで見ると1行2列構成、スマホで見ると2行1列構成になります。

3層目プロフィール枠PC版

3層目プロフィール枠スマホ版

小説一覧はPCで見ると3列構成、スマホで見ると1列構成になります。

3層目小説一覧枠PC版

3層目小説一覧枠スマホ版

CSSとHTML

ソース

FLOCSSを勉強中なんですがまだ理解しきれていないので命名がおかしいのはスルーしてください。

特に説明したい点

ベーシックにグリッドを組みましたが、特に CSS Grid Layout の恩恵を受けられたと思うのは3層目です。

小説一覧枠はメディアクエリなしでレスポンシブを実現しています。

また個人的には minmax 関数がすばらしいと感じています。メイン枠でわざわざ左右の余白をグリッドで表現したのは minmax が使えるからです。

grid-row-gap や grid-column-gap もいいですね。個々の要素にマージンを付けなくても、枠で余白を作れるのは個人的には作りやすいです。(昔、こうやってブロックを積み上げるような作り方をするWebサイト制作ソフトを使っていたからかもしれません。)

まとめ

レガシーブラウザは捨てて CSS Grid Layout を使っていきたいと思います。

※ちなみにEdgeはこのCSSそのままで動きます。

参考