CSS グリッドを使用して行と列をまたぐにはどうすればよいですか?

グリッド内の行をまたがる Div、列をまたぐ Div

グリッド内で div を垂直に拡張する問題に基づいて、次のことを検討します。行と列の両方に同時にまたがるという、より複雑な課題です。 5 つの要素の列で、より大きな要素を中央に戦略的に配置するにはどうすればよいですか?

非理想的なアプローチ

要素を横にフローティングすることは必然的な結果ですfloat プロパティの動作の説明。さらに、ここでは HTML テーブルも CSS グリッド レイアウトも実行可能なソリューションではありません。

ブラウザの互換性

CSS グリッドはシームレスなソリューションを提供しますが、ブラウザのサポートは歴史的に限定されてきました。ただし、主要なブラウザの最近の更新により、グリッド レイアウトが完全に利用できるようになりました。

CSS グリッド ソリューション

グリッド レイアウトは、洗練されたソリューションを提供します。 HTML、ネストされたコンテナ、または固定の高さを変更せずに:

<code class="css">#wrapper {
  display: grid;
  grid-template-columns: repeat(5, 90px);
  grid-auto-rows: 50px;
  grid-gap: 10px;
  width: 516px;
}</code>

特定の行と列にまたがる場合:

<code class="css">.tall {
  grid-row: 1 / 3;
  grid-column: 2 / 3;
}

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

開始行と終了行と列を定義することで、次のことが可能になります。グリッド内の div のサイズと位置を正確に制御し、希望のレイアウトを実現します。

以上がCSS グリッドを使用して行と列をまたぐにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。