为何grid-template-columns: repeat(auto-fit, minmax())规则失效？

核心问题分析 #

你的grid容器（.menu）作为flex父容器（.wrapper）的子元素，默认flex-basis: auto，导致它只会被内部内容撑开宽度，而不会主动占满flex容器的可用空间。grid的auto-fit需要基于容器的完整宽度计算列数，窄容器下自然会因为空间不足直接换行成单列，无法达到预期的横向填充效果。

修复步骤 #

1. 让grid容器占满flex父容器的可用空间
   给.menu添加flex: 1，强制它在flex布局中占据所有剩余空间，这样grid就能拿到正确的宽度来计算列数。
2. 简化grid-template-columns规则
   原规则中的min(9em, 100%)属于冗余写法，直接使用minmax(9em, 1fr)即可满足需求：列宽最小9em，剩余空间自动均等分配。

修改后的关键CSS代码 #

.wrapper {
  display: flex;
  /* 保留你原有其他样式，比如padding、gap等 */
}

.menu {
  display: grid;
  flex: 1; /* 核心修复：让grid容器占满flex父容器空间 */
  grid-template-columns: repeat(auto-fit, minmax(9em, 1fr));
  gap: 1em; /* 保留你的间距设置 */
}

效果验证 #

• 菜单项会横向排列，宽度完全一致，不受文本长度影响
• 菜单项数量变化时，列宽会自动调整以填满行空间
• 当容器宽度不足以放下所有最小宽度的列时，自动换行，每行仍会填满可用空间

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