如何用纯CSS实现CSS Grid元素按内容宽度自适应1/2列布局

可以通过纯Flexbox或CSS Grid + Flexbox组合实现，核心是利用CSS的宽度自适应规则，完全不需要JS计算，避免UI重绘跳变：

方案1：纯Flexbox实现（最简洁） #

直接通过Flex的伸缩规则和最小宽度限制，精准匹配需求：

.container {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem; /* 元素间距，可自定义 */
}

.item {
  flex: 1 1 50%; /* 默认占容器50%宽度，允许伸缩 */
  min-width: max-content; /* 内容宽度超过50%时，强制元素撑满整行 */
  padding: 0.5rem;
  background: #f0f0f0;
}

• 当元素内容≤容器50%宽度时，flex:1 1 50%会让元素每行排列2个，各占50%容器宽度；
• 当元素内容>容器50%宽度时，min-width: max-content会覆盖50%的基础宽度，强制元素单独占一行，且通过flex-grow:1撑满容器宽度。

方案2：CSS Grid + Flexbox组合实现 #

如果必须用Grid作为外层容器，可将Grid列设置为自适应，同时在Grid项内部用Flex处理内容宽度适配：

.grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(50%, 1fr));
  gap: 1rem;
}

.grid-item {
  display: flex;
  min-width: 0; /* 解决Grid中长文本溢出问题 */
  background: #f0f0f0;
}

.grid-item > .content {
  flex: 1;
  min-width: max-content; /* 触发内容宽度超过50%时的整行占据 */
  padding: 0.5rem;
}

外层Grid负责基础两列布局，内层Flex处理内容的宽度自适应，确保内容过宽时自动占满整行，逻辑和纯Flex方案一致。

关键说明 #

• min-width: max-content是核心：它让元素最小宽度等于自身内容宽度，当该宽度超过容器50%时，布局自动调整为单行；
• 可根据需求添加长文本溢出处理，比如overflow: hidden; text-overflow: ellipsis; white-space: nowrap;；
• 全程无JS计算，完全通过CSS属性实现，避免UI跳变。

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