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.