Holy Grail CSS グリッド レイアウト — 準備完了コード
CSS グリッド レイアウトを視覚的にデザインします。ライブ プレビューとコピー可能な CSS および HTML を使用して、列、行、ギャップを設定し、セルにエリア名を入力してグリッド テンプレート エリアを構築します。
処理中...
0%
結果
このページでは、聖杯レイアウトがプリロードされたグリッド ジェネレーターが開きます。3 列 3 行で、ヘッダーとフッターが全幅に広がり、その間にナビゲーション/メイン/補助行が含まれます。ヘッダー行は自動高さを使用し、中央の行は残りのスペースを埋め、2 つのサイド列は 200 ピクセルに固定され、残りはメイン列になります。
聖杯レイアウトという名前が付けられたのは、CSS グリッドが登場する前は確実に構築するのが本当に難しかったためです。何年にもわたるフロート ハック、テーブル レイアウト、絶対配置によって、この正確な形状を偽装しようとしました。グリッド テンプレート エリアを使用すると、5 つの名前付き領域といくつかのトラック サイズに折りたたまれます。そのため、CSS グリッドを教えるための標準的な最初の例であり続けます。
このページのすべての番号とギャップはまだ有効です。横の列を縮小したり、4 行目を追加したり、領域の名前を変更すると、プレビューとコピー可能な CSS がすぐに更新されます。 CSS と HTML ブロックをプロジェクトに直接コピーします。すべてがブラウザーでローカルに実行され、何もアップロードされません。