プレビューを見ながらCSS Grid Layoutのコードが生成できるWEBサービス「Griddy」

プレビューを見ながらCSS Grid Layoutのコードが生成できるWEBサービス「Griddy」

プレビューを見ながらCSS Grid Layoutのコードが生成できるWEBサービス「Griddy」

Griddyは、プレビューを見ながら直感的にCSS Grid Layoutのコードが生成できるWEBサービスです。CSS Grid Layoutにあまり慣れていなくても、簡単にCSSのコードを生成することができます。

Griddyの使い方

1. Griddyにアクセスします。
2. 「Grid Template Columns」でカラム数やサイズを指定します。[Add another column]でカラム数の追加、×マークでカラム数の削除ができます。

Grid Template Columns

3. 「Grid Template Rows」で行数とサイズを指定します。[Add another row]で行の追加、×マークで行の削除ができます。

Grid Template Rows

4. 「Grid Column Gap」と「Grid Row Gap」でグリッドアイテム間の余白を指定します。

Grid Column GapとGrid Row Gap

5. 「Justify Items」では水平方向の位置を指定します。

Justify Items

6. 「Align Items」で垂直方向の位置を指定します。

Align Items

7. 指定が終わったら、画面右下に表示されているCSSをコピペして利用します。

グリッドレイアウトのCSS

以下のようにクラス名は.containerになっていますので、環境に合わせて変更しましょう。


.container {
 display: grid;
 grid-template-columns: 1fr 200px 1fr 1fr;
 grid-template-rows: 2fr 100px;
 grid-column-gap: 20px;
 grid-row-gap: 20px;
 justify-items: stretch;
 align-items: stretch;
}

あとがき

CSS Grid Layoutの登場により、CSSでできることの幅がまた広がりそうですね。プレビューと生成されたCSSを見るだけでも、勉強になりますのでぜひご活用ください。

この記事が気に入ったら
いいね!してね♪

Twitter で

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です