コーディング

cssグリッドレイアウトの生成に便利なWebサービス「Griddy」

2017.07.11

cssグリッドレイアウトの生成に便利なWebサービス「Griddy」

flexboxやtableと同様に、マルチカラムレイアウトをすることができるdisplay要素grid。通常であればgridコンテナの中に多くのプロパティを記述する必要がありますが、それの便利な自動生成Webサービス「Griddy」を見つけましたので、今回はそれを紹介します。

便利なGriddy

サンプルを見ながら生成できる

Griddyはブラウザ上で生成結果を確認しながら作業できます。サイトを開くと4つのグリッドアイテムが表示されており、ページ左側の列からグリッドの数や段組、サイズなどを編集できます。

「Grid Template Columns」欄では1行に何個のグリッドを生成するかを編集でき、サイズの指定も行えます。サイズの単位はfr(比率)、 px、 %、 autoから選ぶことができます。

続く「Grid Template Rows」欄では1列に何個のグリッドを生成するかを編集できます。Columnsと同じくサイズの指定も行えます。

生成したGridのコードが出力される

ページの右下から、生成したGridのコードをコピーすることができます。

デフォルトでは .containerというクラスが当てられていますが、任意のクラスに変更し、親要素にコードを適応すれば完成です。

まとめ

display:gridの生成がかなり楽になったのではないでしょうか。display:gridtableのようにグリッドの連結やサイズ違いを任意の並びにしたり、複雑なことも可能なプロパティです。ここで生成したグリッドを雛形に編集して使うなど、応用の幅は多そうです。

SHARE

この記事の筆者

Web&Soundクリエイター 田村 培修

Web&Soundクリエイター 田村 培修

楽器とパソコンのキーボードを使い分ける当社のマルチクリエイター。e-sportsに興味津々であれこれ情報を収集中。

Archive

CONTACT

06-6537-9941
受付時間
9:00〜19:00
休日
土日祝日

株式会社ゼロワンアース
〒550-0012 大阪市西区立売堀2-5−41合田ビル6F

メールで問い合わせる

ホームページで成果をあげるには、
まず現状分析

反響のないホームページをあきらめていませんか?ホームページで成果をあげるためには、現状を分析し改善していく必要があります。大阪市西区の本社にて無料相談を受け付けておりますので、ホームページ制作のことでお悩みの方は上記CONTACTより、お問い合わせください。