グリッドレイアウトが簡単に作れる!! フレームワーク5選

  • 2018.12.11
  • Web
グリッドレイアウトが簡単に作れる!! フレームワーク5選

今回は、最近流行りのグリッドレイアウトが簡単に作れるフレームワークを5つ紹介します。

css gridもflexboxも覚えるまではちょっと大変です。

しかし、フレームワークを使うことによってかなり高速に組み立てることが出来ます。

また、グリッドレイアウトはBootstrapを始めとしたフレームワークに用意されていますが、今回はグリッドレイアウトに特化したフレームワークを紹介します。

1.Web Grid

URL:https://webjeda.com/web-grid/

https://webjeda.com/web-grid/

Web Gridは、CSS Gridを採用したグリッドシステムです。

その特徴は何といってもgzip後のサイズは224Bというその軽量さにあります。

軽量ではありますが必要十分な機能は全てそろっており、簡単に使えるのも良い点です。

2.Simple Grid

URL:http://www.simplegrid.io/

http://simplegrid.io/

Simple GridもCSS Gridを利用したフレームワークです。

gzip後サイズは635BとWeb Gridには及びませんが、スマホ用のクラスが準備されており、使いやすいという特徴があります。

 

3.msdotcom grid

URL:https://msdotcom.azurewebsites.net/Grid/

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
https://daneden.github.io/Toast/

Toastはscssで細かいカスタマイズの行えるフレームワークです。

自分でグリッドの総カラム数を決めることが出来たり、カラム同士の幅を調節できたりします。

そのため自由度が高いという特徴を持ちます。

5.8-Grid

URL:https://dafu.cf/8-Grid/

8-grid
https://dafu.cf/8-Grid/

8-Gridは総カラム数を8に抑えることで軽量化を図ったフレームワークです。

カラム数は8ですが、3等分も出来ます。

そのCSSファイルはminify+gzipで333Bと、Web Grid程ではありませんが非常に軽量になっています。

また、PC/タブレット/スマホでそれぞれクラスが用意されており、レスポンシブ対応が簡単なのもよい点です。

GitHubのstarもまだ(2018/10/19)付いていない超新興フレームワークなので、掘り出し物な気がします。

まとめ

いかがでしたでしょうか。

グリッドレイアウトを採用することでサイドバーなども実装しやすくなります。

また、複数の要素を横並びさせたい場面もおおく、重宝すると思われます。

どれも特徴があるので、使いやすいものを探しましょう。