使行跨越多列

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 网格中跨多列扩展行或列，从而创建复杂且灵活的布局。