CSSグリッドレイアウトを使用するためにサイトを再設計します-CSSチュートリアル-php.cn

メインコンテンツ領域には2つの列に及ぶ必要がありますが、サイドバーは1つだけを占有する必要があります。行に関しては、その高さを自動的に設定したいと思います。それに応じて.containerグリッドを更新できます：

フッター

結論

CSSグリッドレトロフィットは、開発者が簡単に複雑なレイアウトを作成できるようにするWebデザインの強力なツールです。これは2次元システムであり、主に1次元システムであるFlexBoxとは異なり、列と行の両方を処理できることを意味します。これにより、さまざまな画面サイズと解像度に適応するレスポンシブなデザインを作成するための汎用性の高いツールになります。また、サイズが不明または動的であっても、コンテナ内のアイテム間でスペースを整列および配布するプロセスを簡素化します。

モバイルレスポンシブデザインにCSSグリッドレトロフィットを使用できますか？モバイルレスポンシブデザインを作成するための優れたツールです。これにより、開発者はメディアクエリを使用して、さまざまな画面サイズのさまざまなグリッドレイアウトを定義できます。これは、デスクトップビュー用の複雑なレイアウトと、同じCSSドキュメント内のすべてのモバイルビュー用のよりシンプルでより合理化されたレイアウトを作成できることを意味します。 >

プロジェクトでCSSグリッドレトロフィットの使用を開始するにはどうすればよいですか？

はい、CSSグリッドレトロフィットは、より複雑なデザインのためにFlexBoxなどの他のレイアウト方法と組み合わせることができます。これは、部分的に柔軟で部分的に固定されたレイアウトを作成する場合に特に便利です。レトロフィットには、レイアウト管理を容易にするために名前付きグリッド領域を使用し、FRユニットを柔軟なグリッドトラックに使用し、グリッドレイアウトを視覚化およびデバッグするためのブラウザの開発者ツールでグリッドインスペクターを使用することが含まれます。要素？

ホームページ

ウェブフロントエンド

CSSチュートリアル

CSSグリッドレイアウトを使用するためにサイトを再設計します

Jennifer Aniston

Feb 15, 2025 am 08:45 AM

CSSグリッドレイアウトを使用するためにサイトを再設計します

この記事では、レスポンシブマルチコラムWebサイトレイアウトを作成することにより、CSSグリッドが動作していることを確認します。

CSSグリッドは、最近のWeb開発の新しいホットなトレンドです。テーブルのレイアウトとフロートを忘れてください：ウェブサイトを設計する新しい方法はすでにここにあります！このテクノロジーは、複数のレイアウト領域を複数のCSSルールで定義する2次元グリッドを導入します。

グリッドは、960Gやブートストラップグリッドなどのサードパーティのフレームワークを作成できます。この機能はすべての主要なブラウザによってサポートされていますが、インターネットエクスプローラーは仕様の古いバージョンを実装しています。

グリッドレイアウトを初めて使用する場合は、CSSグリッドの初心者向けガイドをご覧ください。

キーテイクアウト

CSSグリッドレイアウトは、マルチコラムレイアウトの作成を簡素化し、フロートやディスプレイテーブルなどの古いテクニックの必要性を排除します。 CSSグリッドにより、グリッド領域を簡単に再配置およびサイズ変更できるようになり、ブートストラップのような従来のCSSフレームワークと比較して、より柔軟で直感的な設計方法になります。

CSSグリッドの実装では、グリッド、列と行のセットアップ、および単純なCSSルールを使用して指定されたグリッド領域に要素を配置するコンテナを表示します。

CSSグリッドは本質的に応答し、最小限のメディアクエリを使用して、さまざまな画面サイズのコンテンツの簡単な再編成を可能にします。インターネットエクスプローラー、インラインブロック、メディアクエリを使用したフォールバックスタイルなど、CSSグリッドを完全にサポートしていないブラウザの場合、レイアウトがまだ効果的にレンダリングされることを保証します。

CSSグリッドとフレックスボックスを組み合わせて複雑な設計要件を処理し、CSSグリッドの最新のWebデザインにおける互換性と汎用性を紹介できます。

何を構築するのか
それで、ヘッダー、メインコンテンツ領域、右側のサイドバー、スポンサーのリスト、フッターを備えた典型的なWebサイトレイアウトを作成するように求められました。
別の開発者はすでにこのタスクを解決しようとしており、フロート、ディスプレイ：テーブル、およびいくつかのClearFixハックを含むソリューションを思いつきました。この既存のレイアウトを「初期」と呼びます。
最近まで、フロートはそのようなレイアウトを作成するための最良の選択肢であると考えられていました。それ以前は、HTMLテーブルを利用する必要がありましたが、多くの欠点がありました。具体的には、このようなテーブルレイアウトは非常に剛性が高く、多くのタグ（テーブル、TR、TD、THなど）が必要であり、意味的には、これらのタグはレイアウトを設計するのではなく、テーブルデータを提示するために使用されます。
しかし、CSSは進化し続けており、今ではCSSグリッドがあります。概念的には、古いテーブルレイアウトに似ていますが、より柔軟なレイアウトを備えたセマンティックHTML要素を使用できます。グリッドの計画

最初に
最初に：ドキュメントの基本的なHTML構造を定義する必要があります。その前に、最初の例がどのように機能するかについて簡単に説明しましょう。次のメインブロックがあります：
- .main-headerは、.logo（スペースの20％を占有し、左に浮かんでいる）と.main-menu（スペースの79％を占有し、右に浮かぶ）を含むヘッダーです。ヘッダーには、フロートをクリアするためのハッキーな修正も割り当てられています。
- も割り当てられています
- .footerは私たちのフッターであり、スペースの100％までのスパンです。
- の新しいバージョンです
体をグローバル.containerとして利用できることに注意してください。この場合、それは好みの問題です。全体として、6つの主要な領域があります

ロゴ
<div class="container"> <header class="logo"> <h1><a href="#">DemoSite</a></h1> </header> <nav class="main-menu"> <ul> <li class="main-menu__item"><a href="#">Our clients</a></li> <li class="main-menu__item"><a href="#">Products</a></li> <li class="main-menu__item"><a href="#">Contact</a></li> </ul> </nav> <main class="content-area"> <h2>Welcome!</h2> <p> Content </p> </main> <aside class="sidebar"> <h3>Additional stuff</h3> <ul> <li>Items</li> <li>Are</li> <li>Listed</li> <li>Here</li> <li>Wow!</li> </ul> </aside> <section class="sponsors-wrapper"> <h2>Our sponsors</h2> <section class="sponsors"> <figure class="sponsor"> <img src="https://via.placeholder.com/150x150"> </figure> <figure class="sponsor"> <img src="https://via.placeholder.com/200x150"> </figure> <figure class="sponsor"> <img src="https://via.placeholder.com/100x200"> </figure> <figure class="sponsor"> <img src="https://via.placeholder.com/100x100"> </figure> <figure class="sponsor"> <img src="https://via.placeholder.com/200x200"> </figure> </section> </section> <footer class="footer"> <p> © 2018 DemoSite. White&Sons LLC. All rights (perhaps) reserved. </p> </footer> </div> 
ログイン後にコピー
ログイン後にコピー
ログイン後にコピー
ログイン後にコピー
メニュー
5. 通常、モバイルファーストアプローチを実装することをお勧めします。つまり、モバイルレイアウトから開始してから、より大きな画面にスタイルを追加します。この場合、これは必要ありません。なぜなら、既に小画面デバイスの線形ビューに戻る初期レイアウトを適応させるからです。したがって、グリッドの実装に焦点を当てることから始めましょう。その後、応答性とフォールバックルールについて話します。したがって、スキームに戻り、グリッド列をどのように配置できるかを確認してください。
それで、3つの列（赤で強調表示されている）と4列（青で強調表示されている）があることを提案します。ロゴのような一部の領域は1つの列のみを占有しますが、メインコンテンツのような他の領域は複数の列に及ぶでしょう。後で、レイアウトを簡単に変更したり、周囲のレイアウトを移動したり、新しいエリアを追加したりできます。
スキームに続いて、各エリアに一意の名前を付けます。これらは、以下に定義されているレイアウトで使用されます：

ディスプレイプロパティをグリッドに設定し、3つの列を定義し、メインコンテナの左右に小さなマージンを追加します。
<div class="container"> <header class="logo"> <h1><a href="#">DemoSite</a></h1> </header> <nav class="main-menu"> <ul> <li class="main-menu__item"><a href="#">Our clients</a></li> <li class="main-menu__item"><a href="#">Products</a></li> <li class="main-menu__item"><a href="#">Contact</a></li> </ul> </nav> <main class="content-area"> <h2>Welcome!</h2> <p> Content </p> </main> <aside class="sidebar"> <h3>Additional stuff</h3> <ul> <li>Items</li> <li>Are</li> <li>Listed</li> <li>Here</li> <li>Wow!</li> </ul> </aside> <section class="sponsors-wrapper"> <h2>Our sponsors</h2> <section class="sponsors"> <figure class="sponsor"> <img src="https://via.placeholder.com/150x150"> </figure> <figure class="sponsor"> <img src="https://via.placeholder.com/200x150"> </figure> <figure class="sponsor"> <img src="https://via.placeholder.com/100x200"> </figure> <figure class="sponsor"> <img src="https://via.placeholder.com/100x100"> </figure> <figure class="sponsor"> <img src="https://via.placeholder.com/200x200"> </figure> </section> </section> <footer class="footer"> <p> © 2018 DemoSite. White&Sons LLC. All rights (perhaps) reserved. </p> </footer> </div> 
ログイン後にコピー
ログイン後にコピー
ログイン後にコピー
ログイン後にコピー
ディスプレイ：グリッドはグリッドコンテナを定義し、子供に特別なフォーマットコンテキストを設定します。 FRは、「グリッドコンテナの自由空間の一部」を意味する特別なユニットです。 2 6 4は12、6 /12 = 0.5を与えます。それは、中央の列が空きスペースの50％を占めることを意味します。
また、行と列の間に間隔を追加したい：
.logo { grid-area: logo; } .main-menu { grid-area: menu; } .content-area { grid-area: content; } .sidebar { grid-area: sidebar; } .sponsors-wrapper { grid-area: sponsors; } .footer { grid-area: footer; } 
ログイン後にコピー
ログイン後にコピー
ログイン後にコピー
ログイン後にコピー
これを行ったことで、個々の領域で作業できます。しかし、このセクションをまとめる前に、一般的なスタイルをすばやく追加しましょう。

いいね！これで、最初のターゲットに進むことができます。これはヘッダーになります。
.container { display: grid; margin: 0 2rem; grid-template-columns: 2fr 6fr 4fr; } 
ログイン後にコピー
ログイン後にコピー
ログイン後にコピー
ログイン後にコピー
ヘッダーの設計

ヘッダーは、特定の高さを3レムに設定する必要がある最初の行を占有します。最初のレイアウトでは、これはヘッダーラッパーに高さプロパティを割り当てることで解決されます。
また、ロゴとメニューは中央に垂直に整列されていることに注意してください。これは、ラインハイイトトリックを使用して達成されています。
ただし、CSSグリッドを使用すると、物事はより簡単になります。CSSハッキングは必要ありません。
最初の行を定義することから始めます：
.container { // ... grid-gap: 2rem 1rem; } 
ログイン後にコピー
ログイン後にコピー
ログイン後にコピー
ログイン後にコピー
ロゴは1つの列のみを占有する必要がありますが、メニューには2つの列に及ぶ必要があります。上記のグリッドエリア名を参照するGrid-Template-Areasプロパティの助けを借りて意図を表明できます。
* { box-sizing: border-box; } html { font-size: 16px; font-family: Georgia, serif; } body { background-color: #fbfbfb; } h1, h2, h3 { margin-top: 0; } header h1 { margin: 0; } main p { margin-bottom: 0; } 
ログイン後にコピー
ログイン後にコピー
ログイン後にコピー
ログイン後にコピー
ここで何が起こっているのですか？まあ、ロゴは一度だけ言うことで、1つだけを占めることを確認しています。メニューメニューは、メニューが2つの列の2つの列を占めることを意味します。中央と右の列です。このルールがどれほど簡単か！
をご覧ください
y軸のロゴを並べます：
.main-header { height: 3rem; } 
ログイン後にコピー
ログイン後にコピー
ログイン後にコピー
ログイン後にコピー
メニューは垂直に中央に置き、右に引っ張る必要があります：
```
.logo {
 // ...
 height: 100%;
 line-height: 3rem;
}

```
ログイン後にコピー
ログイン後にコピー
ログイン後にコピー
メニューはULタグとLIタグで構築されているため、マーカーを削除し、マージン/パディングを無効にし、メニューをフレックスコンテナに設定して、少しスタイルを整えましょう。

それはほとんどそれです。結果を観察するために、便利なCSSグリッドハイライターツールを有効にしてFirefoxを使用します。（利用可能な他のブラウザには同様のツールがあります。たとえば、Chrome用のグリッドマン。）このツールにアクセスするには、F12を押して、グリッドラベルが必要な.Container要素を選択します。
```
.container {
 // ...
 grid-template-rows: 3rem;
}

```
ログイン後にコピー
ログイン後にコピー
その後、CSSルールタブに進み、ディスプレイ：Gridプロパティを見つけます。グリッド値の横にある小さなアイコンを押すことにより、蛍光ペンを有効または無効にすることができます。
```
.container {
 // ...
 grid-template-areas:
 "logo menu menu";
}

```
ログイン後にコピー
ここに結果があります：
```
.logo {
 grid-area: logo;
 align-self: center;
}

```
ログイン後にコピー
蛍光ペンには、すべての行と列、およびそれらとエリアの名前の間のマージンが表示されます。レイアウトセクション内の出力をカスタマイズできます。これには、ページ上のすべてのグリッドもリストします。

それで、ヘッダーを扱ったので、メインコンテンツ領域とサイドバーに進みましょう。
メインコンテンツとサイドバー

メインコンテンツ領域には2つの列に及ぶ必要がありますが、サイドバーは1つだけを占有する必要があります。行に関しては、その高さを自動的に設定したいと思います。それに応じて.containerグリッドを更新できます：

サイドバーにパディングを追加して、視覚的なスペースをいくつか提供したいと思います。
<div class="container"> <header class="logo"> <h1><a href="#">DemoSite</a></h1> </header> <nav class="main-menu"> <ul> <li class="main-menu__item"><a href="#">Our clients</a></li> <li class="main-menu__item"><a href="#">Products</a></li> <li class="main-menu__item"><a href="#">Contact</a></li> </ul> </nav> <main class="content-area"> <h2>Welcome!</h2> <p> Content </p> </main> <aside class="sidebar"> <h3>Additional stuff</h3> <ul> <li>Items</li> <li>Are</li> <li>Listed</li> <li>Here</li> <li>Wow!</li> </ul> </aside> <section class="sponsors-wrapper"> <h2>Our sponsors</h2> <section class="sponsors"> <figure class="sponsor"> <img src="https://via.placeholder.com/150x150"> </figure> <figure class="sponsor"> <img src="https://via.placeholder.com/200x150"> </figure> <figure class="sponsor"> <img src="https://via.placeholder.com/100x200"> </figure> <figure class="sponsor"> <img src="https://via.placeholder.com/100x100"> </figure> <figure class="sponsor"> <img src="https://via.placeholder.com/200x200"> </figure> </section> </section> <footer class="footer"> <p> © 2018 DemoSite. White&Sons LLC. All rights (perhaps) reserved. </p> </footer> </div> 
ログイン後にコピー
ログイン後にコピー
ログイン後にコピー
ログイン後にコピー
Firefoxのグリッドツールで表示されているように、
結果は次のとおりです
.logo { grid-area: logo; } .main-menu { grid-area: menu; } .content-area { grid-area: content; } .sidebar { grid-area: sidebar; } .sponsors-wrapper { grid-area: sponsors; } .footer { grid-area: footer; } 
ログイン後にコピー
ログイン後にコピー
ログイン後にコピー
ログイン後にコピー
スポンサー
スポンサーセクションには、幅と高さが等しい5つのアイテムを含める必要があります。各アイテムには、1つの画像があります
最初のレイアウトでは、このブロックは表示：テーブルでスタイリングされていますが、依存しません。実際、スポンサーセクションは、CSSグリッドを適用するための優れた候補者かもしれません！
まず、グリッドテンプレートエリアを調整して、スポンサーエリアを含めます。

次に、.sponsorsセクションもグリッドに変えます：

等しい幅の5つのアイテムが必要である限り、繰り返し（）関数を使用して列を定義できます。

行に関しては、その高さを自動的に設定する必要があります。列間のギャップは1REMに等しくなければなりません：
.container { display: grid; margin: 0 2rem; grid-template-columns: 2fr 6fr 4fr; } 
ログイン後にコピー
ログイン後にコピー
ログイン後にコピー
ログイン後にコピー
各アイテムのスタイル：
.container { // ... grid-gap: 2rem 1rem; } 
ログイン後にコピー
ログイン後にコピー
ログイン後にコピー
ログイン後にコピー
これが中間の結果です：
* { box-sizing: border-box; } html { font-size: 16px; font-family: Georgia, serif; } body { background-color: #fbfbfb; } h1, h2, h3 { margin-top: 0; } header h1 { margin: 0; } main p { margin-bottom: 0; } 
ログイン後にコピー
ログイン後にコピー
ログイン後にコピー
ログイン後にコピー
.main-header { height: 3rem; } 
ログイン後にコピー
ログイン後にコピー
ログイン後にコピー
ログイン後にコピー
この例は、問題なくグリッドをネストできることを示しています。別のソリューションはFlexBoxを使用することかもしれませんが、この場合、スポンサーはそれらに十分な幅がない場合にラップする場合があります。
次に、画像を垂直にも水平にも中央に配置したいと思います。次のことを試してみるかもしれません：
```
.logo {
 // ...
 height: 100%;
 line-height: 3rem;
}

```
ログイン後にコピー
ログイン後にコピー
ログイン後にコピー
place-selfは、x軸とy軸の要素を調整します。それは自分自身を調整し、自分自身を正当化するための速記の財産です。
画像は確かに整列されますが、残念ながら白い背景はなくなりました。これは、各.ponsorが画像の寸法に等しい幅と高さを持っているためです。

ここでは別のアプローチが必要であり、可能な解決策の1つはFlexBoxを採用することです。
```
.container {
 // ...
 grid-template-rows: 3rem;
}

```
ログイン後にコピー
ログイン後にコピー
今、すべてが適切に表示され、グリッドがflexboxでうまく再生されることがわかります：

フッター

最後のセクションはフッターで、実際に最も簡単なセクションです。私たちがしなければならないのは、それを3つの列すべてに渡すことだけです：
<div class="container"> <header class="logo"> <h1><a href="#">DemoSite</a></h1> </header> <nav class="main-menu"> <ul> <li class="main-menu__item"><a href="#">Our clients</a></li> <li class="main-menu__item"><a href="#">Products</a></li> <li class="main-menu__item"><a href="#">Contact</a></li> </ul> </nav> <main class="content-area"> <h2>Welcome!</h2> <p> Content </p> </main> <aside class="sidebar"> <h3>Additional stuff</h3> <ul> <li>Items</li> <li>Are</li> <li>Listed</li> <li>Here</li> <li>Wow!</li> </ul> </aside> <section class="sponsors-wrapper"> <h2>Our sponsors</h2> <section class="sponsors"> <figure class="sponsor"> <img src="https://via.placeholder.com/150x150"> </figure> <figure class="sponsor"> <img src="https://via.placeholder.com/200x150"> </figure> <figure class="sponsor"> <img src="https://via.placeholder.com/100x200"> </figure> <figure class="sponsor"> <img src="https://via.placeholder.com/100x100"> </figure> <figure class="sponsor"> <img src="https://via.placeholder.com/200x200"> </figure> </section> </section> <footer class="footer"> <p> © 2018 DemoSite. White&Sons LLC. All rights (perhaps) reserved. </p> </footer> </div> 
ログイン後にコピー
ログイン後にコピー
ログイン後にコピー
ログイン後にコピー
基本的に、レイアウトは終了します！ただし、まだ完了していません。サイトも応答する必要があります。それでは、次のセクションでこのタスクに注意してみましょう。
レイアウトを応答する

CSSグリッドを所定の位置に配置すると、領域をすばやく再配置できるため、実際には応答性を導入するのは非常に簡単です。
大きな画面

大きな画面から始めましょう（この記事では、Bootstrap 4で定義されているのと同じブレークポイントに固執します）。メインコンテナの水平マージンと個々のスポンサー間のギャップを減らしたいと思います。

中画面
.logo { grid-area: logo; } .main-menu { grid-area: menu; } .content-area { grid-area: content; } .sidebar { grid-area: sidebar; } .sponsors-wrapper { grid-area: sponsors; } .footer { grid-area: footer; } 
ログイン後にコピー
ログイン後にコピー
ログイン後にコピー
ログイン後にコピー
中画面では、メインコンテンツ領域とサイドバーを3つすべての列を占有したいと思います。
また、フォントのサイズを減らして、スポンサーが別の下に表示されるように積み重ねてみましょう。列間のギャップはゼロでなければなりません（実際には列が1つしかないため）。代わりに、行の間にギャップを設定します：
.container { display: grid; margin: 0 2rem; grid-template-columns: 2fr 6fr 4fr; } 
ログイン後にコピー
ログイン後にコピー
ログイン後にコピー
ログイン後にコピー
これは、レイアウトが中程度の画面でどのように見えるかです：
.container { // ... grid-gap: 2rem 1rem; } 
ログイン後にコピー
ログイン後にコピー
ログイン後にコピー
ログイン後にコピー
小さな画面
小さな画面では、各領域を別の行に表示します。つまり、今は1つの列のみがあります。
この場合はメニューを右に引っ張らないでください。また、列間のギャップも必要ありません。

ジョブが完了しました：
* { box-sizing: border-box; } html { font-size: 16px; font-family: Georgia, serif; } body { background-color: #fbfbfb; } h1, h2, h3 { margin-top: 0; } header h1 { margin: 0; } main p { margin-bottom: 0; } 
ログイン後にコピー
ログイン後にコピー
ログイン後にコピー
ログイン後にコピー
さまざまな画面のグリッドアイテムを簡単に再配置することもできます。小さな画面にメニューを下に置きたいとします（訪問者がページで素材を読み終えた後にスクロールする必要がないようにします）。それを行うには、グリッドテンプレートエリアを調整するだけです：
.main-header { height: 3rem; } 
ログイン後にコピー
ログイン後にコピー
ログイン後にコピー
ログイン後にコピー
メディアクエリなしで行う

メディアクエリなしでスポンサーをブロックすることができることに言及する価値があります。これは、Auto-FitプロパティとMinMax関数の助けを借りて可能です。それらを動作させているのを見るには、このような.ponsorsのスタイルを微調整してください：

繰り返し関数は、すでに知っているように、必要に応じて列を何度も繰り返します。
```
.logo {
 // ...
 height: 100%;
 line-height: 3rem;
}

```
ログイン後にコピー
ログイン後にコピー
ログイン後にコピー
自動充填とは、「できるだけ多くの列で行を埋める」ということです。列に十分なスペースがない場合は、次の行に配置されます。

minmaxを使用すると、列の幅の最小値と最大値を指定できます。この場合、各列は自由空間の1回の割合にまたがる必要がありますが、200ピクセル以上。
これは、小さな画面で列がそれぞれ最大200pxに縮小される可能性があることを意味します。まだ十分なスペースがない場合は、1つまたは複数の列が別のラインに移動されます。上記のCSSルールを適用した結果は次のとおりです

フォールバック

残念ながら、CSSグリッドはまだすべてのブラウザーで完全には完全にサポートされていないため、どのようなものが古いバージョンの仕様を実装しているかを推測する場合があります。ええ、インターネットエクスプローラー10と11です。これらのブラウザでデモを開くと、グリッドがまったく機能せず、領域が単に積み重ねられていることがわかります。

もちろん、サイトはまだ使用可能であるため、これは世界の終わりではありませんが、少なくともいくつかのフォールバックルールを追加しましょう。良いニュースは、要素が浮かんでおり、グリッドが割り当てられている場合、グリッドが優先されることです。また、ディスプレイ、垂直アライメント、およびその他のプロパティもグリッドアイテムに影響を与えないため、その事実を利用してみましょう。積み重ねられたメニューは見た目がいいですが、サイドバーはおそらくメインコンテンツの隣に配置する必要があります。 Display：inline-block：
を使用してこれを実現できます
グリッドをサポートするすべてのブラウザでは、これらのプロパティは効果がありませんが、IEでは予想どおりに適用されます。微調整する必要があるもう1つのプロパティは幅です。

しかし、これらのスタイルを追加して、グリッドレイアウトは、グリッドアイテムでは
> <div class="container"> <header class="logo"> <h1><a href="#">DemoSite</a></h1> </header> <nav class="main-menu"> <ul> <li class="main-menu__item"><a href="#">Our clients</a></li> <li class="main-menu__item"><a href="#">Products</a></li> <li class="main-menu__item"><a href="#">Contact</a></li> </ul> </nav> <main class="content-area"> <h2>Welcome!</h2> <p> Content </p> </main> <aside class="sidebar"> <h3>Additional stuff</h3> <ul> <li>Items</li> <li>Are</li> <li>Listed</li> <li>Here</li> <li>Wow!</li> </ul> </aside> <section class="sponsors-wrapper"> <h2>Our sponsors</h2> <section class="sponsors"> <figure class="sponsor"> <img src="https://via.placeholder.com/150x150"> </figure> <figure class="sponsor"> <img src="https://via.placeholder.com/200x150"> </figure> <figure class="sponsor"> <img src="https://via.placeholder.com/100x200"> </figure> <figure class="sponsor"> <img src="https://via.placeholder.com/100x100"> </figure> <figure class="sponsor"> <img src="https://via.placeholder.com/200x200"> </figure> </section> </section> <footer class="footer"> <p> © 2018 DemoSite. White&Sons LLC. All rights (perhaps) reserved. </p> </footer> </div> 
次に、スポンサーのアイテムの世話をして、各ブロックに最大のマージンを追加しましょう。
.logo { grid-area: logo; } .main-menu { grid-area: menu; } .content-area { grid-area: content; } .sidebar { grid-area: sidebar; } .sponsors-wrapper { grid-area: sponsors; } .footer { grid-area: footer; } 
ログイン後にコピー
ログイン後にコピー
ログイン後にコピー
ログイン後にコピー
グリッドがサポートされているときに最高マージンは必要ありませんので、@supportsクエリ内でそれを無効にします：
最後に、IEの応答性を追加しましょう。メインコンテンツ、サイドバーを伸ばし、各スポンサーを小さな画面で全幅に伸ばします。
.container { display: grid; margin: 0 2rem; grid-template-columns: 2fr 6fr 4fr; } 
ログイン後にコピー
ログイン後にコピー
ログイン後にコピー
ログイン後にコピー
グリッドをサポートするブラウザのスポンサーの幅を修正することを忘れないでください：
.container { // ... grid-gap: 2rem 1rem; } 
ログイン後にコピー
ログイン後にコピー
ログイン後にコピー
ログイン後にコピー
今すぐインターネットエクスプローラーのレイアウトの外観は次のとおりです
* { box-sizing: border-box; } html { font-size: 16px; font-family: Georgia, serif; } body { background-color: #fbfbfb; } h1, h2, h3 { margin-top: 0; } header h1 { margin: 0; } main p { margin-bottom: 0; } 
ログイン後にコピー
ログイン後にコピー
ログイン後にコピー
ログイン後にコピー
Codepen：
で最終結果を表示できます
.main-header { height: 3rem; } 
ログイン後にコピー
ログイン後にコピー
ログイン後にコピー
ログイン後にコピー
CodePenのSitePoint（@SitePoint）によるグリッド付きマルチコラムレイアウトを参照してください。
結論
この記事では、CSSグリッドが動作しているのを見て、既存のフロートベースのレイアウトを再設計するためにそれを利用しました。これら2つのソリューションを比較すると、「グリッド」ソリューションのHTMLおよびCSSコードが小さく（もちろん、フォールバックをカウントしない）、よりシンプルで表現力があることがわかります。 Grid-Template-Areasプロパティの助けを借りて、個々の領域がどのようにレイアウトされているかを簡単に理解することができ、それらをすばやく再配置したり、サイズを調整したりできます。それに加えて、ClearFixのようなさまざまなハッキーなトリックに頼る必要はありません。
したがって、ご覧のとおり、CSSグリッドはフロートの優れた代替品であり、生産対応です。インターネットエクスプローラーにいくつかのフォールバックルールを提供する必要があるかもしれません（仕様の古いバージョンを実装しています）が、ご覧のとおり、それらはあまり複雑ではなく、一般的には、逆方向の互換性がなくてもサイトはまだ使用できます。すべて。

すでにCSSグリッドを使用してWebサイトを作成しようとしましたか？あなたの印象は何ですか？コメントであなたの考えを共有してください！

CSSグリッドレトロフィット
に関するよくある質問
WebデザインにおけるCSSグリッドレトロフィットの重要性は何ですか？

CSSグリッドレトロフィットは、開発者が簡単に複雑なレイアウトを作成できるようにするWebデザインの強力なツールです。これは2次元システムであり、主に1次元システムであるFlexBoxとは異なり、列と行の両方を処理できることを意味します。これにより、さまざまな画面サイズと解像度に適応するレスポンシブなデザインを作成するための汎用性の高いツールになります。また、サイズが不明または動的であっても、コンテナ内のアイテム間でスペースを整列および配布するプロセスを簡素化します。

CSSグリッドレトロフィットは、他のグリッドシステムと比較してどのように比較されますか？レトロフィットは、柔軟性と使いやすさのために、他のグリッドシステムから際立っています。大規模なコーディングや計算を必要とする他のシステムとは異なり、CSSグリッドレトロフィットにより、開発者は最小限のコードで複雑なレイアウトを作成できます。また、要素の配置とアライメントをより強化するため、多くの開発者にとって好ましい選択肢になります。

モバイルレスポンシブデザインにCSSグリッドレトロフィットを使用できますか？モバイルレスポンシブデザインを作成するための優れたツールです。これにより、開発者はメディアクエリを使用して、さまざまな画面サイズのさまざまなグリッドレイアウトを定義できます。これは、デスクトップビュー用の複雑なレイアウトと、同じCSSドキュメント内のすべてのモバイルビュー用のよりシンプルでより合理化されたレイアウトを作成できることを意味します。 >
CSSグリッドレトロフィットは、Chrome、Firefox、Safari、Edgeなどのほとんどの最新のブラウザーと互換性があります。ただし、古いブラウザやバージョンでは期待どおりに機能しない場合があります。複数のブラウザでデザインをテストして、意図したとおりに機能するようにすることをお勧めします。
プロジェクトでCSSグリッドレトロフィットの使用を開始するにはどうすればよいですか？

CSSグリッドレトロフィットの使用を開始するには、コンテナ要素をディスプレイ付きグリッドとして定義する必要があります。グリッド。次に、グリッドテンプレートコラムとグリッドテンプレート列を使用して列と行のサイズを定義し、グリッドコラムとグリッドローを使用してその子要素をグリッドに配置できます。他のレイアウトメソッドを使用したグリッドレトロフィット？

はい、CSSグリッドレトロフィットは、より複雑なデザインのためにFlexBoxなどの他のレイアウト方法と組み合わせることができます。これは、部分的に柔軟で部分的に固定されたレイアウトを作成する場合に特に便利です。レトロフィットには、レイアウト管理を容易にするために名前付きグリッド領域を使用し、FRユニットを柔軟なグリッドトラックに使用し、グリッドレイアウトを視覚化およびデバッグするためのブラウザの開発者ツールでグリッドインスペクターを使用することが含まれます。要素？

CSSグリッドレトロフィットにより、要素がオーバーラップできます。これは、一意のレイアウトを作成するための強力なツールになります。 Z-Indexプロパティを使用して、重複する要素の積み重ね順序を制御できます。
垂直レイアウトにCSSグリッドレトロフィットを使用できますか？つまり、両方の列と行を処理できます。これにより、水平レイアウトと垂直レイアウトの両方を作成するための多用途のツールになります。ブラウザの互換性の問題、重複する要素の処理、多くのグリッド領域で複雑なレイアウトの管理。ただし、練習とグリッドプロパティを十分に理解することで、これらの課題を克服することができます。