使行跨越多列

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

基於行的放置：

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

grid-column: 1 / 4;  // Spans columns 1, 2, and 3

明確格網區域：

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

grid-area: 1 / 2 / span 3;  // Spans 3 columns from row 1, column 2

負值：

grid-column 或grid-column-start 中的負值可用於right-向左放置：

grid-column: -2 / -1;  // Spans the last 2 columns

列線箝位：

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

grid-column: auto;
grid-column-end: 100%;

以最小值自動調整大小：

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

grid-column: auto;
min-width: 400px;

範例：

要在所有列上拉長導覽行：

  

    ...
  
  ...

.container {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
}

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

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