サイドバー + コンテンツ CSS グリッド レイアウト
CSS グリッド レイアウトを視覚的にデザインします。ライブ プレビューとコピー可能な CSS および HTML を使用して、列、行、ギャップを設定し、セルにエリア名を入力してグリッド テンプレート エリアを構築します。
処理中...
0%
結果
このページでは、すでに名前が付けられている 2 列 1 行のレイアウト (残りのスペースを占めるフレキシブル コンテンツ列の隣に 200 ピクセルのサイドバー列) を含むグリッド ジェネレーターが開きます。両方の領域がライブ プレビューですぐに表示され、色分けされ、ラベルが付けられているため、分割が一目瞭然です。
これは、Web 上で最も一般的なナビゲーションとコンテンツの形状です。設定ページ、ドキュメント サイト、管理ダッシュボードはすべて、流動的なメイン領域の横にある固定幅のレールに寄りかかっています。サイドバー列はピクセル値を使用し、コンテンツ列は 1fr を使用するため、サイドバーは一定の幅のままですが、コンテンツ列はビューポートの余分なピクセルをすべて吸収します。
いずれかの領域の名前を変更したり、列幅を変更したり、分割の上のヘッダーに行を追加したりできます。以下の CSS および HTML 出力は、すべての編集をリアルタイムで追跡します。このツールは無料で、アップロードやアカウントを必要とせず、完全にブラウザーで動作し続けます。