CSS Grid ジェネレーター

CSS Grid レイアウトを視覚的に作るビルダーです。列と行のサイズを fr、px、%、auto、minmax()、または検証済みのカスタム値で設定し、名前付きエリアを塗ったり、auto-fit のレスポンシブなカードグリッドを作ったりできます。プレビューは生成コードと同じ宣言で動く本物の CSS Grid コンテナーなので、見たままをコピーできます。

1. 1.トラック、名前付きエリア、レスポンシブのいずれかのモードを選ぶか、プリセットを読み込みます。
2. 2.列と行のサイズ、間隔、配置を設定します。
3. 3.トラックでは、プレビューのアイテムをクリックして列や行のまたがりを指定します。
4. 4.名前付きエリアでは、名前を入力してセルをクリックし、各エリアを塗ります。
5. 5.CSS または単体で動く HTML ページをコピーまたはダウンロードします。

名前付きエリアはそれぞれ隙間のない長方形である必要があり、そうでないとブラウザーは grid-template-areas 宣言全体を無視します。このツールはどのエリアがルールに違反しているかを説明し、修正するまでプレビューとコードに最後の有効なレイアウトを表示します。カスタムのトラックサイズは適用前に検証されます。

最大 12 列、12 行、48 アイテムです。カスタムサイズには長さ、パーセント、fr、auto、min-content、max-content、minmax()、fit-content() を使えます。calc()、var()、ライン名、単一トラック内の repeat() は使えません。レイアウトはこのブラウザーにのみ保存されます。