CSS グリッドジェネレータ
CSS グリッドコンテナ宣言を生成します — 等幅のカラム、等高のロー、ギャップを持つ display: grid を、シンプルなカラム/ロー/ギャップコントロールから生成します。
入力
出力
このツールを使う他の方法
REST API
curl -X POST https://api.iotools.cloud/v1/tool/css-grid-generator \
-H "Authorization: Bearer YOUR_API_KEY" \
-H "Content-Type: application/json" \
-d '{
"columns": "3",
"rows": "2",
"gap": "16"
}'ご自身のアカウントのキーに差し替えてください。ツールのフィールドがそのままリクエストボディになります——ラッパーはありません。
AIエージェントに依頼する
Use the IOTools `css-grid-generator` tool (CSS Grid Generator) on this input:
YOUR_INPUT_HEREIOTools MCPサーバーに接続された任意のエージェントにこれを貼り付け、入力内容を追加してください。
埋め込みウィジェット
<iframe
src="https://iotools.cloud/embed/css-grid-generator/"
width="100%" height="520" frameborder="0" scrolling="no" loading="lazy"
title="CSS グリッドジェネレータ — iotools.cloud"
sandbox="allow-scripts allow-forms allow-same-origin allow-downloads allow-popups allow-popups-to-escape-sandbox"
allow="clipboard-write"
style="width:100%;border:1px solid #e5e7eb;border-radius:12px;overflow:hidden"></iframe>
<script src="https://iotools.cloud/embed.js" async></script>ご自身のページに貼り付けるだけ——無料、キー不要、リンクを掲載するだけです。
| API/MCP 1回あたりの費用 | 5クレジットから |
|---|---|
| クレジットが足りませんか? | 料金を見る |
次の方法でも利用可能
ガイド
CSS グリッドとは？
CSS グリッドは2次元デザイン向けに構築されたレイアウトシステムです — ローとカラムを同時に扱います。単一の軸に沿ってアイテムを配置するFlexboxとは異なります。任意の要素をグリッドに変換するには、1つのデクラレーション display: grid; と、それが持つべきトラックの説明が必要です。このツールは最も一般的なケースのためにデクラレーションを生成します: 等幅のカラムと等高のロー、セル間に一貫した間隔を持つ均等に分割されたグリッド。
このツールが生成するプロパティ
display: grid;— 要素をグリッドコンテナに変えます。直下の子要素は自動的にグリッドアイテムになります。grid-template-columns: repeat(N, 1fr);—N個のカラムを作成し、各カラムが利用可能な幅の等しい割合 (1fr) を占めます。repeat()は1frをN回書く省略形です。grid-template-rows: repeat(M, 1fr);— ロー版も同じ考え方:M個の等高ロー。gap: Npx;— ロー間とカラム間のスペース。古いgrid-row-gap/grid-column-gapペアを単一の省略形で置き換えます。
このツールの使い方
- カラムスライダーをドラッグして、グリッドが持つべき等幅カラムの数を設定します(1～12)。
- ロースライダーをドラッグして、等高ロー数を設定します(1～12)。
- ギャップスライダーをドラッグして、グリッドセル間のスペース(ピクセル単位)を設定します。
- CSSボックスから生成された CSS をコピーするか、
.cssファイルとしてダウンロードしてコンテナ要素に適用します — 例えば.grid-container { ...生成された CSS... }のように。
任意のスライダーを動かすと出力がすぐに更新されます — 別の「生成」ステップはありません。
よくある質問
子要素に何か追加する必要はありますか?
いいえ。親に display: grid; とテンプレートトラックがあれば、子要素は自動的に配置され、左から右へ、上から下へセルが埋まります。子要素に追加の CSS が必要になるのは、複数のセルにまたがる場合 (grid-column: span 2;) または特定の位置に配置したい場合だけです。
1fr とは何ですか?
fr は「fraction」の略で、グリッド固有の単位です。1fr は「固定サイズのトラックとギャップを考慮した後の残りスペースの1つの部分」という意味です。ここでは各カラムが 1fr を使用しているため、利用可能な幅はすべてのカラムに均等に分配され、グリッドはコンテナと一緒に自動的にリサイズされます。
200px 1fr 200px のようなカラムを異なる幅にできますか?
このツールは等カラム/等ロー のケースに焦点を当てており、これはほとんどのグリッドレイアウト(画像ギャラリー、カードグリッド、ダッシュボード)をカバーしています。混合された固定/柔軟なトラックの場合は、生成された repeat(N, 1fr) 値を独自のスペース区切りサイズリスト (200px 1fr 200px) に置き換えてください — デクラレーションの残りは変わりません。
gap と margin/padding の違いは何ですか?
gap はグリッドセル間のスペースのみを追加します — margin や padding のようにグリッドコンテナの外側周辺にスペースを追加することはありません。これにより、一貫した内部間隔をより予測可能に選択できます。
CSS グリッドはすべてのブラウザでサポートされていますか?
はい。display: grid とこのツールが生成するプロパティは、2017年以降、すべての主要ブラウザでプレフィックスなしでサポートされています。
プライバシー
すべてはブラウザ内で実行されます。入力した CSS、値、設定がサーバーに送信されることはありません。デクラレーションはスライダーを調整するにつれてローカルで生成・更新されます。