CSS の冒険へようこそ!今日は、Web デザインの武器の中で最も強力なツールの 1 つである CSS グリッド レイアウトについて詳しく説明します。これは、レイアウト技術のスイス アーミー ナイフと考えてください。多用途かつ正確で、Web ページを美しく整理された傑作に変えることができます。グリッドを張って耐える準備はできていますか?行きましょう!
テトリスのゲームをプレイしていると想像してください。ただし、ランダムなブロックを積み上げる代わりに、すべてをどこに配置するかを決めることができます。これが基本的に CSS グリッドの機能です。これにより、柔軟で管理しやすい複雑なグリッドベースのレイアウトを作成できます。基本的な 2 列レイアウトで作業している場合でも、本格的な雑誌スタイルのページで作業している場合でも、CSS Grid がサポートします。
Grid が登場する前は、Web 開発者はレイアウトを作成するために float、table、さらにはネストされた div などの不格好なメソッドに依存する必要がありました。正方形のブロックだけでレゴの城を作ろうとしているようなものでした。しかし、CSS Grid を使用すると、本当に素晴らしいものを作成するために必要な要素がすべて手に入ります。気に入っていただける理由は次のとおりです:
基本から始めましょう。グリッドを作成するには、グリッド コンテナーといくつかのグリッド アイテムが必要です。コンテナは魔法が起こる場所であり、アイテムはグリッド上に配置される要素です。
<div class="grid-container"> <div class="grid-item">1</div> <div class="grid-item">2</div> <div class="grid-item">3</div> <div class="grid-item">4</div> </div>
それでは、そのコンテナを CSS のグリッドに変えてみましょう:
.grid-container { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; } .grid-item { background-color: #007BFF; color: white; padding: 20px; text-align: center; }
詳しく見てみましょう:
グリッドができたので、アイテムの配置方法を工夫してみましょう。 CSS グリッドを使用すると、究極のゲーム盤を計画するマスター戦略家のように、各アイテムをどこに配置するかを正確に指定できます。
.grid-container { display: grid; grid-template-columns: 1fr 2fr; grid-template-rows: auto; gap: 10px; } .grid-item:first-child { grid-column: 1 / 3; }
この例では、最初のグリッド項目は 2 つの列にまたがり、残りはレーン内にきちんと残ります。グリッド列とグリッド行で開始点と終了点を定義することで、グリッド内の任意の場所に項目を配置できます。それは、駐車場に車を斜めに駐車できるのと同じです。なぜなら、それができるからです!
ワンランク上のレベルに引き上げる準備はできていますか? CSS グリッドは単にアイテムをボックスに配置するだけではありません。それは、レイアウト全体を正確かつ簡単に作成することです。
これをグリッド内のグリッドとして考えてください。レイアウトの可能性の始まりです。
.grid-container { display: grid; grid-template-columns: 1fr 2fr; gap: 20px; } .nested-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
ここで、.nested-grid はメイン グリッド内のグリッド アイテムですが、グリッド コンテナ自体でもあり、さらに複雑なレイアウトを作成できます。
利用可能なスペースに基づいてグリッドを適応させたいですか?自動入力と自動フィットを実現します。
.grid-container { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
この設定では、幅 150 ピクセル以上の列をできるだけ多く自動的に作成します。猫が常に足から着地するように、コンテンツを優雅に調整したいレスポンシブ デザインに最適です。
CSS グリッドは、強力かつ柔軟なレイアウトを作成するための究極のツールです。最初は少し気が遠くなるかもしれませんが、一度コツを掴めば、これなしでどうやって生きてきたのか不思議に思うでしょう。 Grid を使用すると、単に Web ページを構築するだけではありません。あなたは、視覚的に素晴らしく、よく整理された傑作を作り上げています。
コーディングを楽しんでください!
以上がグリッド レイアウト: 初心者のための究極のガイドの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。