grid-column-end: -1 异常问题：自适应网格布局实现遇阻

云原生阿岚

2026-7-31

问题分析与解决方案

需求说明

要实现的布局效果：

头部（header）占容器完整宽度
中间行可容纳3个或4个等宽列
底部（footer）宽度与第一列相同

遇到的问题

使用Grid布局时，grid-column-end: -1表现异常：

4个item时需手动设grid-column-end: 5才能正常布局，3个item时需设为4
用grid-column-end: -1时，容器会生成约40列的网格，布局混乱

问题原因

问题出在容器的grid-template-columns配置：

grid-template-columns: repeat(auto-fit, minmax(10px, 1fr));

minmax(10px, 1fr)的最小值设得过小，auto-fit会在容器宽度允许的情况下生成大量10px宽的列，此时-1指向的是最后一列的网格线，导致header横跨所有多余空列，引发异常。

解决方案

调整容器的列配置，让列数根据item数量自适应，同时保证每列等宽：

修改后的完整代码

CSS

.container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
  grid-template-rows: auto minmax(0, 1fr) auto;
  grid-gap: 10px;
  width: 100%;
}

.header {
  grid-column: 1 / -1;
  grid-row: 1;
  background-color: #bbb;
  padding: 20px;
}

.item {
  background-color: #ddd;
  border: 1px solid #aaa;
  padding: 20px;
  grid-row: 2;
}

.footer {
  grid-column: 1 / 2;
  grid-row: 3;
  background-color: #bbb;
  padding: 20px;
}

HTML

<div class="container">
  <div class="header">Header</div>
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="footer">Footer</div>
</div>