CSSグリッドレイアウトビルダー

CSSグリッドレイアウトビルダーは，CSS Gridの行数・列数と共通のトラックサイズを画面で指定し，見本用のCSSとHTMLを組み立てるツールです．初期状態は3列×3行で，列は1fr，行は100px，行間と列間はそれぞれ16pxです．プレビューには1から9までの番号を持つ要素が並び，CSS欄とHTML欄にも同じ初期条件のコードを表示します．

列数と行数は，増減ボタンまたは数値欄でそれぞれ1〜12に変更できます．入力した値は有限な整数へ正規化し，小数は整数へ丸め，範囲外なら下限または上限へ収めます．この12という値はZeroToolsの画面で設けた上限であり，CSS Grid仕様そのものの列数・行数上限ではありません．

生成するHTMLの子要素数は「列数×行数」です．4列×2行なら8件，12列×12行なら最大144件の<div class="grid-item">を1からの連番で出力します．任意の件数だけ子要素を追加・削除する画面ではなく，設定した明示セル数と同じ件数をレイアウト確認用の土台として用意する方式です．

プレビューの番号とHTML内の番号は配置を見分けるための仮データです．実サイトへ組み込むときは，カード，画像，見出し等の実際の内容へ置き換えます．入力内容を保存する履歴，名前を付けたレイアウト，共有URL，ファイル読込はありません．画面を再読込すれば初期3×3へ戻るため，必要なCSS・HTMLは作業中にコピーしてください．

親要素のトラック定義は，列をgrid-template-columns: repeat(列数, 列幅)，行をgrid-template-rows: repeat(行数, 行高さ)として出力します．repeat()は同じトラック定義を指定回数だけ繰り返す記法です．このツールは全列へ同じ列幅，全行へ同じ行高さを設定し，列や行ごとに異なる値を並べる機能は持ちません．

列幅はfr，px，%，autoの4種類です．初期値のrepeat(3, 1fr)は，1frの列トラックを3本作ります．frは親幅を機械的に三等分する割合ではなく，固定長のトラック，gap，内容由来の最小サイズ等を処理した後の残り空間をflex factorに応じて配分する単位です．長い折返し不能文字列や幅の大きい画像等が入ると，同じfr指定でも想定どおり縮まらない場合があります．

pxはCSS上のピクセル長で，列幅を固定値として指定します．%の列幅はグリッドコンテナの内側のinline sizeを基準にしますが，コンテナの幅自体がトラックへ依存する場合，内在寸法の計算中はautoとして扱われ，その後に解決されます．repeat(3, 33%)に列間gapを足せば全体が100%を超える可能性もあるため，%を選ぶだけでは枠内へ収まることを保証できません．

autoは数値欄を表示せず，repeat(列数, auto)を出力します．autoトラックは内容による寸法の影響を受け，余り空間がある場合は配置条件によって引き伸ばされることもあります．単に「中身と同じ幅で固定」とは限りません．

行高さはpx，fr，autoの3種類です．初期値は100pxで，frを選ぶと入力値をそのままflex factorとして，autoなら内容に基づく行トラックとして出力します．行方向でfrの残り空間を意図どおり配分するには，貼り付け先のグリッドコンテナに確定した高さやmin-heightが必要になる場合があります．本ツールは親の高さをCSSへ追加しないため，実ページの条件を見て調整します．

間隔は「列の間隔」と「行の間隔」を別々の数値で指定します．どちらも0以上の有限値へ正規化し，負数は0へ戻します．単位は両方に共通で，px，rem，%の3種類から選びます．行間だけrem，列間だけpxのように異なる単位を同時指定する画面ではありません．

CSSのgap短縮指定は，画面に並ぶ入力欄の順ではなく，gap: 行間 列間の順です．たとえば列間24px・行間8pxならgap: 8px 24px;を生成します．値が同じ場合も一値へ短縮せず，現在の行間と列間を確認できる二値表記を維持します．

pxはCSSピクセル，remはルート要素の計算済みfont-sizeを基準にする長さです．同じ1remでも，貼り付け先サイトのhtml要素に設定されたフォントサイズによって実寸が変わります．ツール内のプレビューと制作サイトのルート設定が異なる場合は，間隔も同じ見た目になりません．

%のgapは，対応する軸のコンテントボックス寸法を基準にします．グリッドコンテナの寸法とpercentage gapが循環する場合，内在寸法への寄与を求める段階では0として扱われ，内容を配置する段階ではコンテントボックスに対して解決されます．このため，プレビューや貼り付け先で後から間隔が加わり，スクロールやはみ出しが生じる場合があります．

%指定をレスポンシブ対応やオーバーフロー防止と同一視せず，実際の親寸法で確認します．

CSS出力は.grid-containerと.grid-itemの二つのルールで構成します．.grid-containerにはdisplay: grid，列と行のrepeat()，gapを含めます．たとえば初期状態なら，3本の1fr列，3本の100px行，16px 16pxのgapという内容です．

クラス名は固定で，既存プロジェクトに同名クラスがある場合の衝突回避やCSS Modules用の名前変換は行いません．

.grid-itemには配置を見分けるための装飾を出力します．内容は薄い青のbackground-color，青い点線border，20pxのpadding，text-align: center，8pxのborder-radiusです．これらはGridのトラック計算に必須の宣言ではありません．制作サイトのデザインへ合わせて色，余白，境界線を削除または変更できます．

HTML出力は<div class="grid-container">を親とし，その内側へ行数×列数分の<div class="grid-item">を文書順に並べます．アイテムごとのgrid-column，grid-row，span，名前付きエリアは付けません．ブラウザの通常の自動配置により，先頭から行方向へ空いているセルへ置かれる構造です．

「CSSコード」と「HTML構造」はタブで切り替え，それぞれ個別にコピーします．Clipboard APIへの書込みが成功した場合だけ「コピー完了」を約2秒表示します．権限，ブラウザ設定，埋込み環境等によって失敗した場合は，コード欄を選択して手動コピーする案内を表示します．コピーに成功しても，貼り付け先の構文，クラス名の競合，既存CSSとの優先順位まで検証するものではありません．

このツールはCSSファイルやHTMLファイルをダウンロードせず，Reactコンポーネント，Tailwindクラス，SCSS，CSS-in-JS形式も生成しません．表示している二つのコード断片を，利用するプロジェクトの構成に合わせて組み込むところまでが利用者側の作業です．

ライブプレビューは，選択した列のfr・px・%・auto，行のpx・fr・auto，gapのpx・rem・%をCSS Gridのインラインスタイルとして確認枠へ渡します．以前のように行やgapを常にpxへ置き換えず，選択中の単位をそのままブラウザへ渡します．設定変更に応じて，要素数とトラック・間隔が同じ画面内で更新されます．

ただし，プレビューは生成コードを適用した完成サイトの再現ではありません．確認枠にはページ表示のための幅，最大高さ350px，内側余白，スクロール設定があります．プレビュー内の各要素にも番号を見やすくする独自の余白，色，境界線があり，出力する.grid-itemの見本装飾と完全に同一ではありません．ここでは行列数とトラック・gapの挙動を確認し，最終的な装飾は貼り付け先で確認します．

実ページでは，親要素の幅・高さ，box-sizing，ルートのfont-size，子要素の最小内容寸法，画像サイズ，改行可否等が計算結果へ影響します．とくにfrとautoは内容の影響を受け，%は基準寸法が未確定な場合に解決過程が変わり，remはサイトのルート設定で変わります．プレビューの番号だけでは再現できない条件です．

固定pxの列を多くした場合，%トラックとgapの合計が広い場合，長い内容が最小幅を押し広げる場合は，グリッド全体が親からはみ出すことがあります．プレビュー枠はスクロールできますが，生成CSSへoverflowを自動追加しません．公開ページで横スクロールを許すか，列数・サイズを変えるか，別のレスポンシブ規則を加えるかは利用側で判断します．

本ツールが生成するのは，全列・全行へ共通値を使う基本的な明示グリッドです．列ごとの異なる幅，行ごとの異なる高さ，minmax()，fit-content()，auto-fit，auto-fill，subgrid，masonryは画面から指定できません．これらの語を説明する場合も，ツールが自動生成する機能としては扱いません．

アイテム側の個別配置も対象外です．grid-template-areas，名前付きライン，grid-column，grid-row，span，重なり，順序変更，ドラッグによる結合やサイズ変更は出力しません．メディアクエリ，コンテナクエリ，ブレークポイントもないため，画面幅に応じて12列を4列・1列へ変えるようなレスポンシブ化は，生成後のCSSへ別途追加します．

生成後に子要素を明示セル数より増やすと，CSS Gridの自動配置によって暗黙トラックが作られる場合があります．本ツールはgrid-auto-rowsやgrid-auto-columnsを指定しないため，追加要素の行・列サイズまで設計しません．反対に子要素を減らせば，明示した空のセルが残ります．HTMLを書き換えた後は，実際の件数で配置を確認してください．

出力するdivは意味を持たない汎用要素です．単なる装飾グループならdivが適切な場合もありますが，内容が一覧ならul・li，独立した記事ならarticle，移動用リンク群ならnav等，情報の意味に合う要素を検討します．CSS Gridの見た目だけで読み上げ順やキーボード順は変わらないため，DOM順を論理的に保ち，見出し構造，リンク名，フォーカス順も別途確認します．

公開前には，対象ブラウザと画面幅での表示，実データを入れた際の最小幅・高さ，%や固定幅によるオーバーフロー，クラス名の競合，文字と背景のコントラストを確認します．生成コードはレイアウトの出発点であり，あらゆる内容での均等配置，レスポンシブ対応，アクセシビリティ適合，全ブラウザでの同一表示，商用利用条件を自動判定または保証するものではありません．