CSS グリッドは複雑なレイアウトに対する究極のソリューションですか?

グリッド レイアウト: 複雑なレイアウトのための最新のソリューション

テーブル以外の行と列の両方にまたがるソリューションの探求、非グリッド レイアウトについては、以前のスレッドで詳しく説明されています。しかし、最近のブラウザの更新により状況は進化しました。

CSS グリッド: ゲームチェンジャー

CSS グリッド レイアウトは現在、すべての主要なブラウザで完全にサポートされており、複雑なレイアウトに対する堅牢かつ柔軟なソリューション。これにより、HTML の変更、ネストされたコンテナの追加、コンテナの固定高さの設定が不要になります。

グリッド レイアウトの実装

1. ラッパー要素の表示プロパティを設定するグリッドに追加して、グリッド レイアウトを有効にします。
2. grid-template-columns と Grid-auto-rows を使用して、グリッドの列と行を定義します。
3. 間の間隔を指定するには、grid-gap プロパティを設定します。要素。
4. 要素のグリッド行プロパティとグリッド列プロパティを使用して、グリッド内での位置を制御します。

グリッド レイアウトの例

CSS グリッドを組み込んだ次のコード スニペットを考えてみましょう:

#wrapper {
  display: grid;                            
  grid-template-columns: repeat(5, 90px);   
  grid-auto-rows: 50px;                     
  grid-gap: 10px;                           
  width: 516px;
}

.tall {
  grid-row: 1 / 3;                          
  grid-column: 2 / 3;                       
}

.wide {
  grid-row: 2 / 4;                          
  grid-column: 3 / 5;                       
}

.block {
  background-color: red;
}

ブラウザ サポートの改善

現在、CSS グリッドは以下によって完全にサポートされています:

• Chrome 57
• Firefox 52
• Safari 10
• Edge 15
• Opera 44

これこれは、ブラウザの互換性の問題を心配することなく、自信を持って CSS グリッドを使用して複雑なレイアウトを作成できることを意味します。

以上がCSS グリッドは複雑なレイアウトに対する究極のソリューションですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。