グリッドまたはテーブル レイアウトを使用せずに、グリッド内の複数の行と列にまたがって Div を広げる方法は?

非グリッド手法を使用してグリッド内の複数の行と列にまたがる Div スパンを作成するにはどうすればよいですか?

以前に解決策を検討したにもかかわらず、複数の行にまたがる場合、今度は行と列の両方にまたがるという課題が生じます。 grid または table レイアウトを使用せずにこれを実現するには、次のアプローチを検討してください:

CSS グリッドのブラウザ サポート

この疑問が提起されて以来、主要なブラウザは CSS グリッド レイアウト を完全にサポートするバージョンをリリースしました。この簡素化されたレイアウト アプローチにより、HTML の変更、ネストされたコンテナ、またはコンテナの高さの修正が不要になります。

CSS グリッドの実装

CSS グリッドを使用したサンプル実装は次のとおりです。 :

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

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

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

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

上記のコードは、等しいサイズの列と自動サイズの行を持つ CSS グリッド を使用します。 Grid-row プロパティと Grid-column プロパティで示されているように、.tall クラスは 2 つの行 (1 と 2) にまたがり、.wide クラスは 2 つの列 (3 と 4) にまたがります。グリッドギャッププロパティは要素間にスペースを追加します。

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