CSS グリッド レイアウトやテーブルを使用せずに、グリッド内の複数の行と列にまたがって Div を広げるにはどうすればよいですか?

グリッド内の複数の行と列の Div

グリッド内の複数の行と列にまたがる div を解決する方法を探します。 CSS グリッド レイアウトやテーブルを使用せずに。

グリッド レイアウトの最近のブラウザ サポート

投稿時点ではグリッド レイアウトのブラウザ サポートについて懸念がありましたが、最近のバージョンでは主要なブラウザの一部が完全なサポートを提供するようになりました。現在のブラウザのサポートの詳細については、関連するドキュメントを参照してください。

CSS グリッド レイアウトを使用したソリューション

グリッド レイアウトを使用すると、HTML を変更せずに目的のレイアウトを簡単に実現できます。ネストされたコンテナー、または固定されたコンテナーの高さ。コード スニペットは次のとおりです:

<code class="css">#wrapper {
  display: grid; // Enable Grid Layout (1)
  grid-template-columns: repeat(5, 90px); // Define columns (2)
  grid-auto-rows: 50px; // Define rows (3)
  grid-gap: 10px; // Set cell spacing (4)
  width: 516px;
}

.tall {
  grid-row: 1 / 3; // Span across rows 1 to 2 (5)
  grid-column: 2 / 3; // Span across columns 2 to 2 (5)
}

.wide {
  grid-row: 2 / 4; // Span across rows 2 to 3 (6)
  grid-column: 3 / 5; // Span across columns 3 to 4 (6)
}

.block {
  background-color: red;
}</code>

<code class="html"><div id="wrapper">
  <div class="block"></div>
  <div class="block tall"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block wide"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
</div></code>

このソリューションは、希望するレイアウトに従って、大きな要素をグリッドの中央に効果的に配置します。

以上がCSS グリッド レイアウトやテーブルを使用せずに、グリッド内の複数の行と列にまたがって Div を広げるにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。