在CSS Grid中使用auto-fit布局，如何使单个单元格占据2列？

完全可以实现这个需求！核心就是结合auto-fit的响应式列生成能力，再用Grid的列跨度属性指定首元素的宽度占比。

先看你提供的原始代码 #

HTML

<h2>Auto-fit</h2>
<div class="wrapper fit">
  <div class="col-2">1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
</div>

CSS

.wrapper {
  display: grid;
}
.fit {
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
}

修改后的实现方案 #

只需要给带.col-2类的首元素添加一行CSS，指定它跨越2列即可：

更新后的CSS

.wrapper {
  display: grid;
  gap: 10px; /* 可选，添加间距让布局更直观 */
}
.fit {
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
}
.col-2 {
  grid-column: span 2; /* 关键：让该元素占据2个自动生成的列 */
}

效果详解 #

• 宽屏状态：容器宽度足够时，首元素会占据2个由auto-fit生成的列宽，剩余元素各占1列，自动填充剩余空间；
• 窄屏自适应：当容器宽度缩小到不足以容纳首元素+一个普通元素时，auto-fit会自动减少列数，此时grid-column: span 2会让首元素占满当前所有列（也就是整行），后续元素依然保持自适应排列，完美适配小屏幕。

这种方式既保留了auto-fit带来的响应式自动换行能力，又精准实现了首元素占2列的布局要求。

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