CSS Grid布局如何实现不同行不同列宽、第二行全宽效果？

这个需求完全可以实现，CSS Grid原生就支持这类不规则网格布局，不需要额外写hack样式，配置逻辑非常简单。

核心实现思路 #

• 先给Grid容器配置列规则，列宽直接按第一行各列的宽度需求定义即可，支持固定像素、比例单位fr、百分比、内容自适应auto等任意CSS长度单位
• 给需要占满整行的第二行元素添加跨列属性，让它自动横跨所有列即可，不需要额外调整容器的列配置

具体代码实现 #

1. 基础容器配置 #

首先给容器声明Grid布局，按第一行的列需求写列宽：

.grid-box {
  display: grid;
  /* 示例配置：第一行3列，宽度分别为200px、自适应填充剩余宽度、150px，可按需修改 */
  grid-template-columns: 200px 1fr 150px;
  gap: 10px; /* 可选，设置单元格之间的间距 */
  padding: 10px;
}

2. 整行元素配置 #

给第二行需要占满宽度的元素加跨列属性，1 / -1代表从第一根列网格线到最后一根列网格线，自动铺满整行，不管你定义了多少列都能自动适配：

.full-width-item {
  grid-column: 1 / -1;
}

3. 完整可运行示例 #

<!DOCTYPE html>
<html>
<head>
  <style>
    .grid-box {
      display: grid;
      grid-template-columns: 200px 1fr 150px;
      gap: 10px;
      padding: 10px;
      border: 1px solid #e5e7eb;
    }
    .grid-item {
      padding: 20px;
      background: #eff6ff;
      border-radius: 4px;
    }
    .full-width-item {
      grid-column: 1 / -1;
      background: #fef2f2;
    }
  </style>
</head>
<body>
  <div class="grid-box">
    <!-- 第一行元素，自动匹配定义的列宽 -->
    <div class="grid-item">第一列（200px）</div>
    <div class="grid-item">第二列（自适应宽度）</div>
    <div class="grid-item">第三列（150px）</div>
    <!-- 第二行整宽元素 -->
    <div class="grid-item full-width-item">第二行（占满整行宽度）</div>
  </div>
</body>
</html>

效果参考 #

补充说明 #

• 你可以根据实际需求随意调整grid-template-columns里的列宽值、列数量，整行元素的配置不需要跟着修改，始终会自动铺满容器宽度
• 如果后续还有其他行需要占满宽度，给对应元素加上grid-column: 1 / -1即可，没有行数限制

内容的提问来源于stack exchange，提问作者ddd