Grid

頻繁に使うものではないですが、必要なコードだけをシンプルに作成してくれるので覚えておくと便利なものだなと思います。

Gridpak

gridpak

作成されるファイルは以下のとおりです。

  • PNG
  • CSS
  • LESS
  • SCSS
  • JavaScript file & Readme

ブレークポイントを設定した分だけPNGファイルが作成されます。ダウンロードした中身を見ると、デモもありました。

responsify

responsify

左下にある「Change Viewport Size」というボタンを押すとデバイス毎の表示をその場で見ることができます。

GRIDINATOR

GRIDINATOR

作成できるレイアウトは3つ

  • fixed
  • fluid
  • elastic

OPTIONSのshow column widthsでカラムの幅が表示されます。

グリッドシステムに関するものというのは、たくさんありますがこういったオンライン上でサクッと出来るジェネレーターをひとつ覚えておくと便利かと思います。

ADVERTISEMENT

Author:

follow FacebookPage

当ブログがお気に召しましたら是非いいね!をお願いします!

Follow Me

閲覧頂きありがとうございました:)

Message

トップへ戻る