动态CSS grid设置template-columns:auto时全宽行不生效问题

grid-column: 1 / -1 仅对显式定义的网格列生效。如果你的.wrapper没有通过grid-template-columns声明列规则，而是依赖浏览器自动生成隐式网格列，-1只会指向显式网格的最后一条列线（默认就是第2条，对应1列宽度），无法匹配到动态生成的隐式列，所以全宽效果不生效。

方案1：显式声明网格列（适配动态列数） #

渲染阶段拿到动态header的数量，写入CSS变量后配置grid-template-columns即可，后续grid-column: 1 / -1规则会正常生效：

.wrapper {
  display: grid;
  /* --header-count 为动态生成的header列数量，由渲染逻辑赋值 */
  grid-template-columns: repeat(var(--header-count), 1fr);
  /* 如果需要适配最左侧的行头列（x/y对应的列），改为如下写法 */
  /* grid-template-columns: auto repeat(var(--header-count), 1fr); */
  gap: 2px;
}
.full-width {
  grid-column: 1 / -1;
}

方案2：大数值span适配（无需提前知道列数） #

如果不想额外处理CSS变量，直接给全宽元素设置足够大的span值即可，只要数值大于你业务场景下可能出现的最大列数，就能自动适配所有动态列：

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

<div class="wrapper">
  <div class="box header">a</div>
  <div class="box header">b</div>
  <div class="box header">c</div>
  <div class="box header">d</div>
  <div class="box full-width">full width</div>
  <div class="box row-header">x</div>
  <div class="box">1</div>
  <div class="box">2</div>
  <div class="box">3</div>
  <div class="box">4</div>
  <div class="box row-header">y</div>
  <div class="box">2</div>
  <div class="box">3</div>
  <div class="box">4</div>
  <div class="box">5</div>
</div>

.wrapper {
  display: grid;
  grid-template-columns: auto repeat(4, 1fr);
  gap: 2px;
  background: #e0e0e0;
  padding: 2px;
}
.box {
  background: #fff;
  padding: 8px 12px;
}
.header, .row-header {
  font-weight: bold;
  background: #f5f5f5;
}
.full-width {
  grid-column: 1 / -1;
}

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