如何实现无媒体查询的自适应布局：宽容器半宽窄容器全宽换行

CSS Grid 实现（符合所有需求） #

可以通过 auto-fit 结合 clamp() 函数实现无需媒体查询的动态布局，完全满足你的要求：

.container {
  display: grid;
  /* clamp函数实现列宽的动态切换：
     1. 容器足够宽时，列宽为容器一半减去gap的一半，保证两列均分
     2. 容器一半宽度小于11rem时，列宽取11rem，此时auto-fit自动切换为单列
     3. 单列时列宽占满容器 */
  grid-template-columns: repeat(auto-fit, minmax(clamp(11rem, calc((100% - 0.5rem) / 2), 100%), 1fr));
  gap: 0.5rem;
}

<!-- 单个元素的情况 -->
<div class="container">
  <input>
</div>

<!-- 两个元素的情况 -->
<div class="container">
  <input>
  <input>
</div>

原理说明：

• clamp(11rem, calc((100% - 0.5rem)/2), 100%)：
  • 当容器宽度 ≥ 2*11rem + 0.5rem（两列加gap的最小总宽度）时，calc((100% - 0.5rem)/2) 大于11rem，列宽取该值，两列均分容器宽度，单个元素也会占一半宽度（剩余列空着）。
  • 当容器宽度小于上述值时，calc((100% - 0.5rem)/2) 小于11rem，列宽取11rem，容器无法容纳两列，auto-fit 自动将布局切换为单列，1fr 让元素占满容器宽度。

你原有Grid代码的问题 #

你之前的 repeat(2, minmax(11rem, 1fr)) 会强制保持2列布局，当容器宽度不足时，列宽固定为11rem，导致容器溢出，无法自动切换为单列。而 auto-fit 会根据容器宽度自动调整列数，解决了这个问题。

Flexbox 方案（局限性说明） #

如果用Flexbox实现，单个元素时会占满容器宽度（无法保持一半宽度），仅当有两个元素时符合需求，代码如下：

.container {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.container > * {
  flex: 1 1 calc(50% - 0.25rem);
  min-width: 11rem;
}

注：该方案中单个元素会占满容器宽度，不符合你“单个元素也占一半宽度”的要求，仅作参考。

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