CSSグリッド好みなあなたにオススメの5つのリソース

1. CSSグリッドのコードを目視で確認できる便利ツール「Griddy」

21.png

Griddyは、実行結果を確認しながらCSSグリッドのコードを生成してくれるツールです。

CSSグリッドは2次元レイアウトなので、FlexboxやFloatのレイアウトが好きな人には少し取っつきにくいかもしれません。しかし、カラム数や幅を設定するだけでコードを自動で生成してくれるので、実践的で便利です。

2. 遊びながらグリッドレイアウトが学べる「Grid Garden」

22.png

Grid Gardenは、グリッドに関するCSSコードを書くことで「ニンジン」を育てていくゲームです。先ほど紹介したFlexbox Froggyも開発しているCodepipが開発しています。

たった1行のコードを完成させる問題が28問ありますが、これらを解くことで、おおまかなCSSグリッドの使い方は理解できます。日本語をはじめ18の言語に対応しているので、英語で困ることもないでしょう。

3. 高機能なビジュアルガイド「CSS Grid Cheat Sheet」

23.png

CSS Grid Cheat Sheetは、CSSグリッドの高機能なビジュアルガイドです。マテリアルデザインのUIで、アイテムを足しながらグリッドの整列をリアルタイムで確認することができます。

非常に細かい部分までCSSグリッドのプロパティを指定できますが、あくまでも「ここの数字を変えたらこのように見た目が変わる」というのをシミュレーションできるツールです。工夫しながら使ってみましょう。

4. 蜂の巣状にCSSグリッドを配置できる「Hexi-Flexi-Grid」

24.png

Hexi-Flexi-Gridは、CSSグリッドベースで、ヘキサゴン状に蜂の巣のようにグリッドを配置するライブラリです。JavaScriptには依存しておらず、完全にCSSだけで作られています。

Sassファイルが同梱されているので、Sassを設定することで、六角形の大きさや向きなどを変えることができます。ヘキサゴン部分に画像や文字を入れることもできます。

5. CSS「Grid Examples」

25.png

Grid Examplesは、実際にCSSグリッドを使って構築されたサイトを集めたカタログサイトです。ブログからニュースサイトまで、さまざまなジャンルのWebサイトが集められています。

一口にCSSグリッドが使われていると言っても、それぞれのサイトがユニークな手法でデザインされています。中にはグリッドを斜めにしたり、あえて崩したデザインを採用しているサイトもあるので、CSSグリッドの全体的なレイアウトの新しいアイデアが生まれそうです。