如何使 CSS 網格行跨越多列？

使行跨越多列

CSS 網格中的行可以使用適當的網格屬性配置為包含多個列。以下是實現此目的的方法：

基於行的放置：

最常見的方法是透過基於行的放置，您可以在其中指定列的起始行與結束行：

<code class="css">grid-column: 1 / 4;  // Spans columns 1, 2, and 3</code>

明確網格區域：

使用grid-area 屬性，明確定義佔用的單元格：

<code class="css">grid-area: 1 / 2 / span 3;  // Spans 3 columns from row 1, column 2</code>

負值：

grid-column 或grid-column-start 中的負值可用來從右到左放置：

<code class="css">grid-column: -2 / -1;  // Spans the last 2 columns</code>

列線箝位:

此技術使用線箝位將行的端點延伸到可用空間：

<code class="css">grid-column: auto;
grid-column-end: 100%;</code>

使用最小值自動調整大小：

使用最小寬度自動調整大小可確保行至少佔據指定數量的列：

<code class="css">grid-column: auto;
min-width: 400px;</code>

範例：

範例：

<code class="html"><div class="container">
  <div class="main-nav">
    ...
  </div>
  ...
</div></code>

<code class="css">.container {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
}

.main-nav {
  grid-column: 1 / -1;  // Spans all columns
}</code>

拉伸導航行跨所有列：

透過應用其中一種方法，您可以在CSS 網格中跨多列擴展行或列，從而創建複雜而靈活的佈局。

以上是如何使 CSS 網格行跨越多列？的詳細內容。更多資訊請關注PHP中文網其他相關文章！