如何使用非網格技術使 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中文網其他相關文章！
