CSS グリッドジェネレータ

CSS グリッドジェネレータは、CSS グリッドレイアウト用のビジュアルビルダーです。必要な列と行の数を選択し、各軸のトラックサイズを選択し、ギャップとアライメントを設定し、プレビューグリッドをリアルタイムで再配置します。表示されるものを生成する正確な CSS は、その下にあるコピー対応ボックスに収まるため、グリッド-テンプレート-列を手書きしたり、頭の中で分数単位を数えたりする必要はありません。

CSS Gridは2 次元のレイアウトモデルです。 flexboxが1 つの軸に沿ってアイテムを敷設するのとは異なり、gridは行と列を同時に制御します。 containerは、小さなプロパティのセットを通じて構造を保持します: grid-template-columnsとgrid-template-rowsはトラックを定義し、ギャップはそれらの間の間隔を追加し、アイテムとトラックをjustify-items、align-items、justify-contentとalign-contentの位置を設定します。 このツールは、それらのプロパティを1 つのパネルで公開し、結果をすぐに表示します。

ジェネレータは、複数のトラックを持つ任意の軸に対して repeat()関数を使用するため、grid-template-columns: repeat(3, 1fr)は、反復リストではなく、等しい列の 3 列のグリッドに対して取得される fr 単位は、コンテナ内の空きスペースの一部を表し、グリッド レイアウトを流動的にするものです: 3 つの 1fr 列がそれぞれ幅の 3 分の 1 を取り、コンテナのサイズが変更されるとリフローします。また、トラック サイズ メニューから、自動、最小コンテンツ、最大コンテンツ、固定ピクセル トラックを混合することもできます。

すべてブラウザーで完全に実行されます。 signup がなく、何もアップロードされず、ページが読み込まれるとツールはオフラインで動作し続けます。各プロパティがどのようにレイアウトを変更するかを確認できるため、学習補助としても、ギャラリー、ダッシュボード、カード レイアウト、またはページ シェル全体の実稼働対応グリッド CSS を高速に生成する方法としても役立ちます。生成されたルールは、.grid-container クラスをターゲットにし、目に見える効果を持つプロパティのみをリストするため、出力はクリーンに保たれます。