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

Grid-template-areas 宣言は、存在する CSS の中で最も読みやすいものの 1 つですが、それが存在するのは一度だけです。手作業でそこに到達するには、引用符で囲まれた文字列を数え、行の長さを一致させる必要があり、1 つの不一致セルが静かにレイアウト全体を破壊します。このジェネレーターはこれを直接操作に変換します。列数と行数を設定し、ライブ グリッドの任意のセルに名前を入力すると、一致する名前が 1 つの名前付き領域に自動的にマージされます。

内部的には、空白のままにしたすべてのセルは、生成されたグリッド テンプレート エリア文字列のドットになり、名前を付けたすべてのセルはその名前の四角形の一部になります。 CSS では、名前付き領域が 1 つのきれいな長方形ブロックを占めることしか許可されないため、ツールは入力時にそれをチェックし、名前がまだ有効な長方形を形成していない場合には正確に通知します。ブラウザは黙って CSS を生成するのではなく、拒否します。

列ギャップと行ギャップのデフォルトは 8 ピクセルで、それらが一致すると 1 つのギャップ ラインに結合されます。ライブ プレビュー グリッドは、聖杯の 200 ピクセルのサイド レールのようなプリセットの固定ピクセル列を含む、グリッド テンプレート列トラックとグリッド テンプレート行トラックを常にミラーリングします。コピー可能な出力は、スタイルシート用に準備された CSS ブロックと、名前付き領域ごとに 1 つのグリッド領域 div を持つ一致する HTML スケルトンの両面をカバーしています。

グリッドとフレックスボックスはさまざまなレイアウトの問題を解決します。このサイトの css-flexbox-generator は、1 次元レイアウト (ナビゲーション バーやカードのスタックなどの柔軟なアイテムの 1 行または 1 列) の開始点として最適です。 2 次元コントロール、明示的な行と列、またはヘッダー/ナビゲーション/メイン/フッターなどの名前付き領域が必要な場合は、代わりにこのグリッド ジェネレーターを使用してください。多くの場合、2 つのツールは同じページ (ページ シェルのグリッドとその部分内のフレックスボックス) 上に配置されます。このサイトのすべてのツールと同様、このツールは完全にブラウザー内で実行されます。アップロードやアカウントは必要ありません。