如何使用 CSS 網格跨越行和列？

網格中的跨行、跨列Div

基於在網格中垂直擴展div 的問題，我們現在探索更複雜的挑戰：同時跨越行和列。在五個元素的行中，我們如何策略性地將較大的元素放置在中心？

非理想方法

將元素浮動到一邊是固有的結果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中文網其他相關文章！