如何让CSS Grid行内元素自动填充所有可用水平空间

要让同一grid-row区间内的元素自动填充可用水平空间，只需给网格容器添加合适的列布局规则，配合你已有的grid-row动态设置逻辑即可：

核心CSS设置 #

给网格容器设置以下样式：

.grid-container {
  display: grid;
  /* 关键：自动适配列数，每列平分空间 */
  grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
  gap: 1rem; /* 可选，添加元素间的间距 */
}

元素样式说明 #

• 无需给网格元素设置固定宽度，让它们自适应列宽
• 保留你原有的脚本逻辑，动态给元素设置grid-row属性控制垂直位置

完整示例代码 #

<div class="grid-container">
  <div class="grid-item" style="grid-row: 1/2">grid-row: 1/2</div>
  <div class="grid-item" style="grid-row: 3/4">:3/4</div>
  <div class="grid-item" style="grid-row: 3/4">:3/4</div>
  <div class="grid-item" style="grid-row: 4/6">grid-row: 4/6</div>
</div>

<style>
.grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
  gap: 1rem;
}

.grid-item {
  border: 2px solid #333;
  padding: 1.5rem;
  border-radius: 4px;
}
</style>

原理说明 #

repeat(auto-fit, minmax(0, 1fr))的作用：

• auto-fit会根据容器宽度自动创建足够的列，容纳同一行的所有元素
• minmax(0, 1fr)让每列宽度平分容器剩余空间，0确保元素内容较小时也能占满分配的列宽，不会出现留白

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