本文へスキップ
Grd

CSS Gridジェネレーター

グリッド定義 + エリア名を GUI で作成。

1
2
3
4
5
6
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: auto auto;
gap: 8px;

CSS Gridジェネレーターについて

grid-template-columns/rows/areas をプレビュー付きで組み立てます。処理はブラウザ内で完結します。

使い方

  1. 列・行を調整
  2. プレビューを確認
  3. CSSをコピー

よくある質問（FAQ）

無料？

はい。

送信される？

いいえ。