Toolipedia 埋め込み
JA
← すべてのテキストツール

CSSグリッドジェネレーター

列、行、間隔を指定してグリッドレイアウトを作成。リアルタイムプレビュー付き。

  • 無料
  • 登録不要
  • どの端末でも使える

約CSSグリッドジェネレーター

列数と行数、ギャップのサイズ、fr、px、autoの単位でのトラックサイズを設定し、CSSをコピーする前にグリッドがリアルタイムに更新される様子を確認できます。fr単位は空き領域を比例配分するため、1fr 2frでは2列目の幅が1列目の2倍になります。

CSSグリッドジェネレーターの使い方

  1. グリッドの列数と行数を設定してください。
  2. 列と行のサイズ、およびセル間のギャップを調整してください。
  3. CSSグリッドのコードをコピーして、スタイルシートに貼り付けてください。

このツールを使う理由

別名

よくある質問

CSS Gridのfr単位は何を意味しますか?

1frは、グリッドコンテナーに残った空間の一部です。列が1fr 1fr 2frなら、空間は4つに分けられ、最後の列に2つ分が割り当てられます。

グリッドをレスポンシブにするにはどうすればよいですか?

固定のピクセルではなく、frユニットやminmaxなどの柔軟なサイズを使い、小さな画面ではメディアクエリで列数を変更してください。

グリッドのgapとmarginの違いは何ですか?

gapは、外側の縁ではなく、セルの間にだけスペースを追加します。マージンは、各項目の周りにスペースを追加し、隣り合う項目の間で二重になることがあります。

CSSグリッドジェネレーターは無料ですか？

はい。ToolipediaのCSSグリッドジェネレーターは無料で、登録不要、透かしもありません。

安全に使えますか？

はい。すべての計算はブラウザ内で行われ、入力した内容が当社サーバーに送信されることはありません。

スマートフォンでも使えますか？

はい。AndroidやiPhoneの最新ブラウザのほか、タブレットやパソコンでも使えます。インストールは不要です。

アカウントは必要ですか？

いいえ。ページを開いてツールを使うだけです。登録もメールアドレスも不要です。

CSSグリッドジェネレーター を自分のサイトに置けますか？

はい。ツールの下にある「サイトに埋め込む」ボタンで短いコードをコピーし、ページに貼り付けてください。無料でアカウントも不要、ツールはページ内でそのまま動作します。

関連ツール