CSS Grid：如何让动态数量的列自适应填满行宽？

DevOps 小满

2026-8-16

CSS Grid实现动态列数下的整行填充方案

完全可以实现动态列数场景下的行内元素自动适配并填满整行宽度，核心是利用CSS Grid的跨列属性来实现。

问题根源

你当前的代码中，.grid 用 repeat(auto-fit, minmax(0, 1fr)) 生成了动态列，但 .item-2 未设置跨列规则，默认只占据1列宽度，因此无法填满整行。

解决方案

给需要占满整行的元素添加 grid-column: 1 / -1;，这个规则表示元素从第1列开始，延伸至网格的最后一列（-1 是CSS Grid中代表最后一列的快捷写法），无论网格有多少列，都会自动填满整行宽度。

修改后的完整代码

CSS 代码

.wrapper {
  display: grid;
  grid-template-columns: 200px 200px;
  column-gap: 20px;
}

.grid {
  border: solid #FF8181 1px;
  display: grid;
  grid-template-rows: 40px repeat(8, minmax(0, 1fr));
  width: 200px;
  grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
}

.row-item {
  background: #FFC555;
  border: 1px solid #835600;
  width: 100%;
  height: 40px;
}

.item-1 {
  grid-row: 2 / span 1;
}

.item-2 {
  grid-row: 6 / span 1;
  font-size: 12px;
  grid-column: 1 / -1; /* 新增：强制跨所有列 */
}

HTML 代码

<div class='wrapper'>
  <div class='grid'>
    <div class='row-item item-1'></div>
    <div class='row-item item-1'></div>
    
    <div class='row-item item-2'>I'm too short</div>
  </div>

  <div class='grid'>
    <div class='row-item item-1'></div>
    <div class='row-item item-1'></div>
    <div class='row-item item-1'></div>
    
    <div class='row-item item-2'>Should be the whole width</div>
  </div>
</div>