如何设置Grid布局Div的列宽等于其父元素的100%宽度？

针对你描述的父div包含1行、列数不固定的Grid布局场景，以下是几种实用的实现方式：

情况1：所有列平分父容器宽度 #

不管子元素数量多少，每列自动平分父容器的100%宽度，总宽度刚好填满父元素。

给Grid容器添加以下CSS：

.grid-container {
  display: grid;
  width: 100%; /* 强制Grid容器撑满父div */
  grid-auto-flow: column; /* 子元素按列排列，形成单行 */
  grid-auto-columns: 1fr; /* 每列平分父容器空间 */
}

这种方式完全适配列数动态变化的场景，新增或删除子元素时，列宽会自动调整，总宽度始终保持父元素的100%。

情况2：列宽由内容决定，但总宽度强制撑满 #

如果希望列的基础宽度由内容决定，同时保证总宽度填满父容器（内容总宽度不足时拉伸列，超过时自动收缩），可以用以下设置：

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

/* 处理内容过长导致的溢出问题（可选） */
.grid-container > * {
  min-width: 0;
  overflow: hidden; /* 可根据需求替换为scroll或其他溢出处理方式 */
}

minmax(0, 1fr)保证列能收缩到最小，避免内容溢出时超出父容器，auto-fit会自动适配子元素数量，确保总宽度始终为父元素的100%。

额外注意事项 #

• 如果父div设置了padding或margin，建议给父div添加box-sizing: border-box，避免内边距挤压Grid容器的宽度：

.parent {
  box-sizing: border-box;
}

• 若需要动态控制列数，可结合CSS变量和JS实现，比如通过JS计算子元素数量后设置--column-count变量，再用repeat(var(--column-count), 1fr)定义列宽。

内容的提问来源于stack exchange，提问作者Bear Bile Farming is Torture