CSSグリッドは、Webレイアウトを大幅に簡(jiǎn)素化します。學(xué)習(xí)曲線がありますが、その直感的な性質(zhì)により、特にヘッダーとフッターの管理に使用するのが楽しくなります。このチュートリアルでは、CSSグリッドを使用して固定フッターとスティッキーフッターの両方を作成することを示しています。 Rachel Andrewの「The New CSSレイアウト」は、グリッドとFlexBoxに深く飛び込むために強(qiáng)くお?jiǎng)幛幛筏蓼埂?/p>

プロジェクトの概要

ヘッダー、メインコンテンツ、フッターを使用して、クラシックなHTMLレイアウトを構(gòu)築します。 2つのフッターバリエーションを?qū)g裝します。コンテンツの長(zhǎng)さに関係なく、ビューポートの底に殘っている固定フッターと、底部に接著するが、より長(zhǎng)いコンテンツによって押し下げられる伝統(tǒng)的な粘著フッターです。メインコンテンツ領(lǐng)域は、完全なビューポート幅にまたがるか、定義された幅內(nèi)を中心に順応します。

固定フッターは、粘著性のあるフッターほど一般的ではありませんが、チャールズシュワブのようなサイトで使用されます。それらの実裝には、多くの場(chǎng)合、ハードコーディングされたサイズとパディングが含まれます。私たちのアプローチは、これらの制限を回避し、CSSグリッドの柔軟性を活用します。

先に進(jìn)む前に、Charles Schwabのホームページの固定フッターを調(diào)べてください。 DevToolsでコードを検査すると、ハードコーディングされた高さと位置決めが明らかになります。

これらの制約なしに同様の効果を達(dá)成しましょう。

初期スタイル

最小限のUIから始めて、CSSグリッドで徐々に強(qiáng)化します。 CodeSandBox（およびその後の反復(fù)）は、インタラクティブな例を提供します。

まず、Viewportの全高さを使用していることを確認(rèn)してください。

體 {
  マージン：0; / * scrollbarsを防ぐ */
}

＃アプリ {
  高さ：100VH;
}

次に、ヘッダー、メイン、フッターセクションとグリッド構(gòu)造を定義します。この初期構(gòu)造は、まだ意図したとおりに機(jī)能していません。それは基礎(chǔ)として機(jī)能します：

體 {
  マージン：0;
}

＃アプリ {
  高さ：100VH;

  / *グリッドコンテナ設(shè)定 */
  ディスプレイ：グリッド;
  Grid-Template-Columns：1fr;
  Grid-Template-rows：auto 1fr auto;
  Grid-Template-Areas：
    'ヘッダ'
    '主要'
    「フッター」;
}

#App>ヘッダー{
  グリッドエリア：ヘッダー。
}

#App> main {
  グリッドエリア：メイン;
  パディング：15px 5px 10px 5px;
}

#App>フッター{
  グリッドエリア：フッター。
}

これにより、単一列のレイアウトが作成されます。 1fr 「殘りのスペースをとる」という意味で、全幅の列になります。行は、 auto （ヘッダーとフッター用）と1fr （メインコンテンツ用の殘りスペースを埋めるため）を使用してサイズになります。ハードコーディングされた高さは必要ありません。

コンテンツ統(tǒng)合

提供されたCodeSandboxは、デモンストレーションの目的でReactを使用しますが、CSSグリッドの原則はフレームワークとは無(wú)関係です。ヘッダー、メイン、フッターコンポーネントは、それぞれのHTML要素をレンダリングします。請(qǐng)求および設(shè)定セクションでは、サンプルコンテンツを提供し、レイアウトの適応性を示します。

初期レイアウトには機(jī)能的な「請(qǐng)求」セクションが表示されますが、「設(shè)定」はフッターを畫面外に押し出します。スクロールはページ全體に影響を及ぼし、ヘッダーが消えます。これに対処しましょう。

ヘッダーとフッターを固定しました

コンテンツがビューポートを超えた場(chǎng)合、 100vh高さとauto / 1frの行のサイジングが最初に問(wèn)題を引き起こします。 overflow: auto<main></main>要素は、メインコンテンツ領(lǐng)域內(nèi)のスクロールを可能にし、ヘッダーとフッターを固定したままにします。

 #App> main {
  グリッドエリア：メイン;
  オーバーフロー：自動(dòng);
  パディング：15px 5px 10px 5px;
}

この更新されたデモは、スクロールと可視性の問(wèn)題を解決します。

調(diào)整可能なメインセクション幅

メインコンテンツを幅600px以內(nèi)に中央に配置するか、フルビューポートに及ぶようにするために、內(nèi)部にグリッドをネストします<main></main>。これは、3つの列（ 1fr 600px 1fr ）を使用して、600pxセクションを効果的に中心にしています。

 #App> main {
  ディスプレイ：グリッド;
  Grid-Template-rows：1fr;
  Grid-Template-Columns：1FR 600PX 1FR;
}

コンテンツは、グリッド座標(biāo)を使用して配置されます。 a .fullクラスでは、コンテンツが幅全體に及ぶことができます。

 #App>セクション{
  グリッドエリア：1 / 2/1 / 3;
}

#App> section.full {
  グリッドエリア：1/1 / 1/4;
}

グリッドラインの使用（3列の4行）の使用に注意してください。ビューポートを縮小すると、固定された600px幅の切り捨ての問(wèn)題が明らかになります。 minmax(0, 600px)これを解決し、幅を最大600pxまで調(diào)整できるようにします。

主要 {
  ディスプレイ：グリッド;
  Grid-Template-rows：1fr;
  Grid-Template-Columns：1FR Minmax（0、600px）1FR;
}

最終的なデモでは、このレスポンシブな動(dòng)作を紹介します。

伝統(tǒng)的なスティッキーフッター

伝統(tǒng)的なスティッキーフッターを作成するために、グリッド構(gòu)造を変更します。<main></main>要素には、グリッド內(nèi)にフッターが含まれるようになりました。

<div>
  <header></header>
  <main>
    <section></section>
    <footer></footer>
  </main>
</div>

#appグリッドは2つの行があるように更新されます。

 ＃アプリ {
  / *以前と同じ */
  Grid-Template-Columns：1fr;
  グリッドテンプレート列：Auto 1FR;
  Grid-Template-Areas：
    'ヘッダ'
    '主要';
}

<main></main>グリッドは、フッターを含めるように調(diào)整されています。

 #App> main {
  ディスプレイ：グリッド;
  Grid-Template-rows：1fr auto;
  Grid-Template-Columns：1FR Minmax（0、600px）1FR;
}

このグリッド內(nèi)のフッターポジショニング：

 #App>フッター{
  グリッドエリア：2 /1 / 3/4;
}

このセットアップにより、フッターを內(nèi)のコンテンツによって押し下げることができます<main></main>、希望するスティッキーフッター効果を作成します。適切なアライメントを確保するために、マイナーパディングの調(diào)整が行われました。最終的なデモは、この動(dòng)作を示しています。セクション要素に追加のスタイリングが適用され、垂直レイアウトを維持しながらコンテンツ領(lǐng)域內(nèi)の水平スクロールが可能になりました。

結(jié)論

実証された技術(shù)はCSSグリッドなしでは達(dá)成可能ですが、グリッドは統(tǒng)一されたエレガントなソリューションを提供します。固定からスティッキーフッターへの単純な移行によって実証されているように、その柔軟性と使いやすさは、複雑なレイアウトのための強(qiáng)力なツールになります。提示された例は比較的単純で、より野心的なプロジェクトのCSSグリッドの可能性を示しています。

以上がスティッキーヘッダーとフッターにCSSグリッドを使用する方法の詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國(guó)語(yǔ) Web サイトの他の関連記事を參照してください。