为何grid-template-columns的auto会让多个元素宽度一致？

为啥会出现所有项宽度一致的问题 #

你的外层容器.wrapper用了display: grid，Grid容器的默认行为是：让所有子元素（也就是每个.item）拉伸到容器列的最大宽度，而容器列宽会自动取所有子项里最宽的那个尺寸，所以所有.item都被拉成一样宽了。

Grid方案（优先推荐） #

给.wrapper加一行grid-template-columns: max-content，让Grid的列宽度只适配每个子项自身的最大内容宽度，不再强制统一拉伸：

*,
*:before,
*:after {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-size: 32px;
}

.wrapper {
  display: grid;
  gap: 0.25rem;
  place-content: center;
  min-height: 100vh;
  padding: 2rem;
  grid-template-columns: max-content; /* 关键新增 */
}

.item {
  display: grid;
  grid-auto-flow: column;
  grid-template-columns: 1em auto;
  align-items: center;
  gap: 0.5em;
  border: 2px solid red;
}

.something-else {
  border: 1px solid blue;
}

Flexbox方案 #

如果想用Flex布局，需要调整外层容器的对齐方式，阻止子项自动拉伸：

*,
*:before,
*:after {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-size: 32px;
  /* 用body做容器居中整个列表 */
  display: flex;
  min-height: 100vh;
  justify-content: center;
  align-items: center;
  padding: 2rem;
}

.wrapper {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  align-items: flex-start; /* 核心：不让.item拉伸占满容器宽度 */
}

.item {
  display: flex;
  align-items: center;
  gap: 0.5em;
  border: 2px solid red;
}

.something {
  width: 1em; /* 固定第一列宽度 */
}

.something-else {
  border: 1px solid blue;
}

内容的提问来源于stack exchange，提问作者Awesom-o