CSSグリッドジェネレーター
CSSグリッドレイアウトを視覚的にデザインできます。列、行、間隔を設定し、セルに領域名を入力して grid-template-areas を構築。ライブプレビューとコピー可能なCSSおよびHTML付きです。
🔒 ブラウザ内で完全に処理されます。ここに入力した内容はアップロードされません。
結果
grid-template-areas 宣言は、CSSの中でも特に可読性の高いコードですが、それは一度完成してからの話です。手作業で作ろうとすると、引用符で囲まれた文字列を数え、行の長さを一致させねばならず、セルがひとつでもずれるとレイアウト全体が音もなく壊れます。このジェネレーターはそれを直接操作に変えます。列数と行数を設定し、ライブグリッドの任意のセルに名前を入力するだけで、同じ名前が自動的にひとつの領域に結合されます。
内部では、空白のままのセルがすべて、生成される grid-template-areas 文字列のドットに変換され、名前を付けたセルはその名前の長方形の一部になります。CSSでは名前付き領域はひとつのきれいな長方形ブロックしか占有できないため、入力と同時にツールがチェックし、その名前がまだ有効な長方形を形成していない場合に正確に通知します。ブラウザが拒否するCSSを黙って生成することはありません。
列間隔と行間隔のデフォルトは8pxで、一致する場合はひとつの gap 行にまとめられます。ライブプレビューのグリッドは常にあなたの grid-template-columns と grid-template-rows のトラックを反映し、ホーリーグレイルの200pxのサイドレールのようなプリセット由来の固定ピクセル列も含みます。コピー可能な出力は両面をカバーします。スタイルシート用のCSSブロックと、名前付き領域ごとに grid-area div を持った対応HTMLスケルトンです。
グリッドとフレックスボックスは異なるレイアウト問題を解決します。このサイトの css-flexbox-generator は、ナビゲーションバーやカードの積み重ねのような、1行または1列の柔軟なアイテムを扱う1次元レイアウトの出発点として優れています。一方、このグリッドジェネレーターは、2次元の制御、明示的な行と列、または header/nav/main/footer のような名前付き領域が必要な場合に使用してください。この2つのツールは同じページで併用されることが多く、ページ全体のシェルにグリッド、その内部パーツにフレックスボックスという使い方が一般的です。当サイトの全ツールと同様、完全にブラウザ上で動作し、アップロードもアカウントも不要です。