今回は、最近流行りのグリッドレイアウトが簡単に作れるフレームワークを5つ紹介します。
css gridもflexboxも覚えるまではちょっと大変です。
しかし、フレームワークを使うことによってかなり高速に組み立てることが出来ます。
また、グリッドレイアウトはBootstrapを始めとしたフレームワークに用意されていますが、今回はグリッドレイアウトに特化したフレームワークを紹介します。
1.Web Grid
URL:https://webjeda.com/web-grid/
Web Gridは、CSS Gridを採用したグリッドシステムです。
その特徴は何といってもgzip後のサイズは224Bというその軽量さにあります。
軽量ではありますが必要十分な機能は全てそろっており、簡単に使えるのも良い点です。
2.Simple Grid
Simple GridもCSS Gridを利用したフレームワークです。
gzip後サイズは635BとWeb Gridには及びませんが、スマホ用のクラスが準備されており、使いやすいという特徴があります。
3.msdotcom grid
URL:https://msdotcom.azurewebsites.net/Grid/
msdotcom gridは、クラス名が先述した二つと異なるCSSフレームワークです。
見ればわかりますが、
col-x-y
とした時に、これはy分のxの幅になります。また、row(行)に当たるクラスも.ms-rowとなっているのも独特です。
しかしその分カスタマイズ性に富み、非常に広い幅(最大24カラム!!)で調節出来ます。
4.Toast
URL:https://daneden.github.io/Toast/
Toastはscssで細かいカスタマイズの行えるフレームワークです。
自分でグリッドの総カラム数を決めることが出来たり、カラム同士の幅を調節できたりします。
そのため自由度が高いという特徴を持ちます。
5.8-Grid
8-Gridは総カラム数を8に抑えることで軽量化を図ったフレームワークです。
カラム数は8ですが、3等分も出来ます。
そのCSSファイルはminify+gzipで333Bと、Web Grid程ではありませんが非常に軽量になっています。
また、PC/タブレット/スマホでそれぞれクラスが用意されており、レスポンシブ対応が簡単なのもよい点です。
GitHubのstarもまだ(2018/10/19)付いていない超新興フレームワークなので、掘り出し物な気がします。
まとめ
いかがでしたでしょうか。
グリッドレイアウトを採用することでサイドバーなども実装しやすくなります。
また、複数の要素を横並びさせたい場面もおおく、重宝すると思われます。
どれも特徴があるので、使いやすいものを探しましょう。