如何实现容器内Item默认两列布局，内容溢出时统一转为单列？

直接用CSS Grid就能解决你的问题，既实现默认两列布局，又能在任意item内容超出阈值时自动切换为全单列，同时修复奇数个item最后一列占满的问题。

修改后的代码 #

.container {
  display: grid;
  /* 核心：列最小宽度取「50%减gap一半」和「内容实际宽度」的较小值，自动适配列数 */
  grid-template-columns: repeat(auto-fit, minmax(min(calc(50% - 5px), max-content), 1fr));
  gap: 10px;
}

.item {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  border: 1px solid black;
  padding: 14px;
  border-radius: 4px;
  cursor: pointer;
  background-color: white;
  /* 可选：防止内容横向溢出容器 */
  word-break: break-word;
}

.radio {
  display: block;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 1px solid black;
}

HTML部分保持你原来的代码即可。

原理说明 #

• grid-template-columns的核心逻辑：
  1. calc(50% - 5px)：容器gap是10px，每列分走一半gap的空间，保证两列布局时不会因为间距导致换行。
  2. max-content：获取item内容的实际宽度，当内容宽度超过50%阈值时，min()会优先取这个值作为列的最小宽度。
  3. auto-fit：自动根据容器宽度和列最小宽度调整列数——当列最小宽度超过容器一半时，只能放下1列，所有item自动变成100%宽度。
• 去掉了Flex布局里的flex-grow:1和min-width，用Grid的自动适配逻辑，奇数个item的最后一列也会保持和其他列一致的50%宽度，不会占满整行。

预期效果 #

两列布局（item宽度50%）：

单列布局（item宽度100%）：

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