ITエンジニア/デザイナ向けにオープンソースを毎日紹介

CSSグリッドはまだモダンなWebブラウザでしか使えませんが、それまでのテーブルで組むやり方や、Divタグで組むのに比べるとシンプルで分かりやすいのが利点です。その一方、使いこなすのが難しいイメージがあります。CSSだけで全体を想像しながら作るのは困難です。

そこで使ってみたいのがLayoutit Gridです。Webブラウザを使ってビジュアル的にCSSグリッドを構築できます。

Layoutit Gridの使い方

メイン画面です。ここでグリッドの行列の数、セル間の幅を指定します。

変更はリアルタイムに反映されます。

ギャップも変更する度に表示に反映されます。

Layoutit Gridを使うことで、あらかじめ指定されているプロパティを設定するだけで即座にCSSグリッドの結果を確認できます。fr/px/%やmin-contentなどセルの大きさは自由に変更できます。結果はgrid-containerというクラスになりますので、自分のWebサイトであらかじめ用意しておけばすぐに利用できます。

Layoutit GridはVue製のオープンソース・ソフトウェア(MIT License)です。

Interactive CSS Grid Generator | Layoutit Grid

Leniolabs/layoutit-grid: Layoutit grid is a CSS Grid layout generator. Quickly draw down web pages layouts with our clean editor, and get HTML and CSS code to quickstart your next project.

 

MOONGIFTの関連記事

  • DevRel
  • Com2