⭐ 0
🔍
テキスト 画像 PDF・ドキュメント 音声 音楽 電子回路 時間 便利ツール バリデータ スピリチュアル ゲーム

3 つの等しい列の CSS グリッド レイアウト

CSS グリッド レイアウトを視覚的にデザインします。ライブ プレビューとコピー可能な CSS および HTML を使用して、列、行、ギャップを設定し、セルにエリア名を入力してグリッド テンプレート エリアを構築します。

以下の任意のセルに名前を入力します。同じ名前のセルは 1 つのグリッド テンプレート領域領域にマージされます。

処理中... 0%

結果

このページでは、グリッド ジェネレーターを 1 行に 3 つの等しい幅の列に設定し、名前付き領域をオフにして開きます。レイアウトは、単にrepeat(3, 1fr) です。これは、「利用可能な幅を常に均等に分割する 3 つの列」を表す最短の方法です。

等幅列は、カード グリッド、価格表、画像ギャラリーの主力製品です。すべての列が同じ役割を果たすため、領域に名前を付ける必要はありません。そのため、単純なトラックのサイズ設定は、グリッド テンプレート領域の宣言よりも明確です。行を追加すると、同じ 3 つのトラックが完全に均等な状態でその下に繰り返されます。

グリッドの密度を高くするには列数を増やすか、後の列を残りの列より目立たせる必要がある場合は名前付き領域をオンにします。これを行うとすぐに、以下の CSS と HTML が更新されます。すべてがクライアント側で実行されるため、アップロードするものや待機するものは何もありません。

🛡️
ブラウザ内で実行

100% クライアントサイド。ファイルはデバイスから送信されません。完全なプライバシー保護。

受け入れられる形式とルール

  • 1 ～ 6 の列と行の数値入力に加え、一致する場合に 1 つのギャップ値に結合する個別の列ギャップと行ギャップのコントロール。
  • 名前付きエリア モード: ライブ グリッドの任意のセルにエリア名を直接入力します。このツールは有効なグリッド テンプレート エリア文字列を構築し、名前がきれいな四角形を形成しない場合に警告します。
  • コピー可能な CSS ブロック (表示: グリッド、グリッド テンプレートの列/行、ギャップ、グリッド テンプレート エリア) と、名前付き領域ごとに 1 つのグリッド エリア div を持つ一致する HTML スケルトン。

主な利点

✓ 任意のセルに名前を直接入力すると、一致する名前が 1 つのグリッド テンプレート領域領域にマージされます。ドラッグして選択したり、引用符付き文字列の構文を手動で推測したりする必要はありません。
✓ ライブ プレビュー グリッドは、変更が加えられるたびにサイズ変更と色変更が行われるため、CSS を 1 行コピーする前に、正確な列トラックと行トラック、およびすべての名前付き領域を確認できます。
✓ 古典的な聖杯レイアウトや狭いサイドバーのようなプリセットを使用すると、空白のグリッドの代わりに実際に機能するグリッド テンプレート エリア宣言を開始できます。

使用例

  • • グリッド テンプレート エリアを手書きする代わりに、エリア名を入力して、古典的な聖杯ページ シェル (ナビゲーション/メイン/脇の中央行を備えた全幅のヘッダーとフッター) を構築します。
  • • 柔軟なコンテンツ列の隣に固定幅のサイドバーを備えた設定ページまたは管理ダッシュボードをレイアウトし、ライブ プレビューが正しく表示されたら、正確な CSS と HTML をコピーします。
  • • 出荷前に、一連の名前付き領域が実際に有効な四角形を形成していることを確認します。このツールは、ブラウザーでグリッド テンプレート エリアを分割する可能性がある正確な名前にフラグを立てます。