デザイン · 無料

CSS Grid生成

列数、行数、間隔からグリッドのプレビューとCSSを生成します。

01値を入力

ブラウザーで動作

—

ブラウザーで動作

列数、行数、間隔からグリッドのプレビューとCSSを生成します。

ブラウザーで動作

入力はこのページ内で処理され、サーバーには送信されません。

このツールについて

等幅列のCSS Gridを作り、コードを自分のページへ調整できます。

値を入力
列数 · 行数 · 間隔
計算 / 生成
列数、行数、間隔からグリッドのプレビューとCSSを生成します。
結果
display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(80px, auto)); gap: 16px;

等幅列のCSS Gridを作り、コードを自分のページへ調整できます。

使用例

結果

display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
grid-template-rows: repeat(2, minmax(80px, auto));
gap: 16px;

結果をどう解釈すればよいですか？

等幅列のCSS Gridを作り、コードを自分のページへ調整できます。

データはどこへ送られますか？

計算は端末上で行います。入力はサーバーへ送信されません。