手軽にCSSグリッドレイアウトのコードを生成できる「Griddy」

先日公開した記事「CSSグリッドレイアウトで、サイズが違う複数のボックスをタイル状に配置する」に続き、CSSグリッドレイアウト情報第二弾。今回はグリッドレイアウトを作成するにあたり、「Griddy」というCSSコードを生成してくれる便利なWebサイトがあったので紹介します。グリッドレイアウトの勉強にもなると思いますよ!


gridアイテムを追加
Griddyのサイトを開くと4つのグリッドアイテムが表示されています。アイテムの数を増減するには左上の「Add or Remove elements within the grid」のエリアでプラスまたはマイナスのボタンをクリックして数を変更します。

Gridレイアウトのカラム幅を指定
続いて「Grid Template Columns」でカラムの幅を指定します。デフォルトでは3つのボックスが横並びになっていますが、4つ以上に増やす場合は「Add another column」ボタンをクリックして増やせます。逆に減らす場合は「×」ボタンをクリック。ボックスの幅は fr(fraction = 比率), px, %, auto から選択できます。

gridレイアウトで高さを指定
スクロールすると「Grid Template Rows」で高さの指定が可能です。こちらもカラム数と同様、「Add another row」ボタンで行の追加、「×」ボタンで削除できます。

グリッド間の余白
「Grid Column Gap」と「Grid Row Gap」でグリッドアイテム間の余白を指定できます。こちらはpxか%で指定。

グリッドアイテムの水平方向の揃え
「Justify Items」では水平方向の揃えを指定します。stretch(デフォルト), center, start, end から選べます。どんな並びになるのかデモを見ながら調整できるのがいいですね。

グリッドアイテムの垂直方向の揃え
最後に「Align Items」で垂直方向の揃えを指定します。こちらも同様に stretch(デフォルト), center, start, end から選べます。

グリッドレイアウトのコード
作成したグリッドレイアウトのコードは画面右下に表示されています。こちらのコードを親要素に指定すれば完成!この例では親要素に対して「container」というクラスを付与していますね。もちろんクラス名は任意なので、別のものに変えてもOKです。

Griddyでは基本的なグリッドレイアウトが組めますが、ボックスのサイズを個別に変更するなど、さらに細かい指定をしたい場合は子要素に対してCSSを指定する必要があります。「CSSグリッドレイアウトで、サイズが違う複数のボックスをタイル状に配置する」を参考にあれこれ試してみてくださいね!

シェアする

コメント

ニュースレター

Web制作の最新情報やWebクリエイターボックスからのお知らせ、中の人の近況等を定期的にお送りいたします。 ぜひご登録ください!もちろん無料です! :)