如何在不使用網格或表格佈局的情況下使 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 網格 具有相同大小的列和自動調整大小的行。 .tall 類別跨越兩行（1 和 2），.wide 類別跨越兩列（3 和 4），如 grid-row 和 grid-column 屬性所示。 grid-gap 屬性在元素之間新增空間。

以上是如何在不使用網格或表格佈局的情況下使 Div 跨網格中的多行和多列？的詳細內容。更多資訊請關注PHP中文網其他相關文章！