CSS Grid ジェネレーターは何を出力しますか？

display: grid・grid-template-columns・grid-template-rows・gap を持つコンテナルールに加え、作成した各結合領域ごとに grid-column / grid-row のルールを生成します。ブロック全体をスタイルシートにコピーします。

トラックはいつ repeat() にまとまりますか？

同一で隣接するトラックが 3 つ以上あると repeat(n, value) にまとまります。連続 1 つや 2 つは書き出したままです。repeat() は 3 トラック以上でのみ出力を短くするからです。混在した並びはリテラルトラックと repeat() グループを交互に配置します。

複数の列や行にまたがるようセルを結合するには？

プレビューで 1 つのセルをクリックし、次に 2 つ目のセルをクリックします。ツールはその間の長方形を選択し、正しい開始ラインとまたがりで grid-column と grid-row を書き出します。結合ブロックを再度クリックすると単一セルに分割できます。

トラックサイズに minmax()・auto・パーセントを使えますか？

はい。各トラックは fr 値・ピクセル長・パーセント・auto・minmax(min, max) を受け付けます。素の数値は fr として扱われ、minmax() の間隔は正規化されるため、コピーされる CSS が一貫します。

生成されるルールが :nth-child() セレクターを使うのはなぜですか？

結合領域は位置で配置されるため、ツールは :nth-child() でソース順のグリッド子要素を対象にします。コンテナセレクターを自分のクラスに改名すると、配置ルールも自動でそれに従います。

設計したグリッドはどこかに送られますか？

いいえ。CSS Grid ジェネレーターはテンプレートと配置の CSS をすべてブラウザ内で構築します。設定した列・行・ギャップ・結合セルは端末から離れず、ArrayKit にアップロードされません。

CSS Grid ジェネレーター

CSS グリッドを視覚的に設計 — 列・行・ギャップ・結合セルを設定し、grid-template CSS をコピーします。すべてブラウザ内で動作します。

CSS Grid ジェネレーターはすべてブラウザ内で動作します。設定した列・行・トラックサイズ・ギャップ・結合セルは端末から離れず、ArrayKit には何もアップロードされません。

CSS Formatter を開く

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

CSS Grid ジェネレーターでは、グリッドレイアウトを目で見ながら構築し、生成される正確な CSS をコピーできます。列数と行数を選び、各トラックを fr 単位・ピクセル・パーセント・auto・minmax() でサイズ指定し、ギャップを設定します。ライブプレビューがグリッドを表示し、2 つのセルをクリックしてまたがる領域に結合すると、対応する grid-column と grid-row のルールが自動で書き出されます。同一トラックが 3 つ以上連続すると repeat() にまとめられて出力がすっきり保たれ、セレクターを自分のクラスに合わせて改名できます。カード・ダッシュボード・ページシェルをレイアウトするフロントエンド開発者が、行を手で数えることなく正しい grid-template CSS を得るために作られています。エディターはすべてブラウザ内で動作するため、入力した内容はアップロードされません。

機能

列数と行数を設定し、各トラックを個別にサイズ指定
fr・px・%・auto・minmax() プリセットによるトラックごとのサイズ指定
テンプレートとギャップを正確に反映するライブプレビューグリッド
2 つのセルをクリックしてまたがる領域に結合
同一トラックの連続は自動で repeat() にまとめられる
異なる値が必要なときは row-gap と column-gap を分離
ルールが自分のクラス名に合うカスタムセレクター
クリーンな grid-template CSS と grid-column / grid-row 配置をコピー

CSS Grid ジェネレーターの使い方

レイアウトに必要な列数と行数を選びます
各トラックを fr・px・%・auto・minmax() でサイズ指定します
ギャップを設定し、異なる場合は列ギャップも設定します
プレビューで 2 つのセルをクリックしてまたがる領域を結合します
生成された CSS をスタイルシートにコピーします

例

入力

columns: 200px 1fr 1fr 1fr
rows: auto
gap: 20
merge: cols 2-4

出力

.grid {
  display: grid;
  grid-template-columns: 200px repeat(3, 1fr);
  grid-template-rows: auto;
  gap: 20px;
}

.grid > :nth-child(1) {
  grid-column: 2 / span 3;
  grid-row: 1;
}

3 つの等しい列が repeat(3, 1fr) にまとめられ、結合セルが 3 トラックにまたがります。

よくあるエラーとトラブルシューティング

レイアウトがトラックリストで定義した数より多くの列を使う。 — 暗黙の列はすべて auto トラックになります。サイズ指定したい各列に明示的なトラックを追加するか、あふれた分に対して自分の CSS で grid-auto-columns を設定してください。
結合した領域が別の領域と重なり、セルが消える。 — 結合領域は重なれません。既存のブロックをクリックして先に分割し、それから新しいまたがりのために 2 つのセルを選んで、長方形が別々に保たれるようにしてください。
トラックが同じに見えるのに repeat() が現れない。 — 同一で隣接するトラックが 3 つ以上のときだけ repeat() にまとまります。1 のような素の数値は 1fr と読まれるため、1fr と 1 のような混在した単位も正規化後は一致します。
子要素の配置が間違ったアイテムに当たる。 — 配置は :nth-child() でソース順のグリッド子要素を対象にします。マークアップを並べ替えるか nth-child のインデックスを調整して、意図した要素にルールが当たるようにしてください。

よくある質問

CSS Grid ジェネレーターは何を出力しますか？: display: grid・grid-template-columns・grid-template-rows・gap を持つコンテナルールに加え、作成した各結合領域ごとに grid-column / grid-row のルールを生成します。ブロック全体をスタイルシートにコピーします。
トラックはいつ repeat() にまとまりますか？: 同一で隣接するトラックが 3 つ以上あると repeat(n, value) にまとまります。連続 1 つや 2 つは書き出したままです。repeat() は 3 トラック以上でのみ出力を短くするからです。混在した並びはリテラルトラックと repeat() グループを交互に配置します。
複数の列や行にまたがるようセルを結合するには？: プレビューで 1 つのセルをクリックし、次に 2 つ目のセルをクリックします。ツールはその間の長方形を選択し、正しい開始ラインとまたがりで grid-column と grid-row を書き出します。結合ブロックを再度クリックすると単一セルに分割できます。
トラックサイズに minmax()・auto・パーセントを使えますか？: はい。各トラックは fr 値・ピクセル長・パーセント・auto・minmax(min, max) を受け付けます。素の数値は fr として扱われ、minmax() の間隔は正規化されるため、コピーされる CSS が一貫します。
生成されるルールが :nth-child() セレクターを使うのはなぜですか？: 結合領域は位置で配置されるため、ツールは :nth-child() でソース順のグリッド子要素を対象にします。コンテナセレクターを自分のクラスに改名すると、配置ルールも自動でそれに従います。
設計したグリッドはどこかに送られますか？: いいえ。CSS Grid ジェネレーターはテンプレートと配置の CSS をすべてブラウザ内で構築します。設定した列・行・ギャップ・結合セルは端末から離れず、ArrayKit にアップロードされません。

CSS Grid ジェネレーター

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

機能

CSS Grid ジェネレーターの使い方

例

よくあるエラーとトラブルシューティング

よくある質問

関連ツール

すべての ArrayKit ツール

CSS Grid ジェネレーター

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

機能

CSS Grid ジェネレーター の使い方

例

よくあるエラーとトラブルシューティング

よくある質問

関連ツール

すべての ArrayKit ツール

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

CSS Grid ジェネレーターの使い方