响应式双列grid布局实现：首列最大占20%宽，小屏自动堆叠

方案1：媒体查询实现（最稳妥可控） #

这是最符合需求的实现方式，你可以自定义断点阈值灵活适配不同设备：

const StyledRow = styled.div`
  display: grid;
  grid-template-columns: 20% auto;
  align-items: center;
  margin-bottom: 15px;
  /* 768px为常用移动端断点，可根据业务调整 */
  @media (max-width: 768px) {
    grid-template-columns: 1fr;
    gap: 8px;
    /* 可选：小屏下标签左对齐更符合移动端交互习惯 */
    & > label {
      justify-self: start !important;
      padding-right: 0 !important;
    }
  }
`

实现逻辑：大屏保持你原来的20% + 自适应的双列规则，小于指定断点时自动切换为单列布局，第二列自然排在第一列下方。

方案2：无媒体查询自动适配（容器级自适应） #

如果你需要组件在不同宽度的父容器内都能自动适配（不需要依赖全局屏幕宽度），可以用纯grid规则实现：

const StyledRow = styled.div`
  display: grid;
  grid-template-columns: minmax(auto, 20%) minmax(280px, 1fr);
  grid-auto-flow: row wrap;
  align-items: center;
  margin-bottom: 15px;
  gap: 10px;
`

规则说明：

• 第一列minmax(auto, 20%)：最小宽度为标签内容本身宽度，最大不超过容器的20%，完全符合你的第一列宽度要求
• 第二列minmax(280px, 1fr)：最小宽度设为输入框可正常展示的最小宽度（可自行调整数值），最大占满剩余容器宽度
• grid-auto-flow: row wrap：当容器宽度不足以放下两列的最小宽度总和时，第二列会自动折到下一行

原有错误写法问题说明 #

你尝试的repeat(auto-fill, minmax(20%, 80%))是用于等宽响应式网格的写法，所有列的宽度规则完全一致，不符合你两列宽度规则不同的需求，因此会出现宽度异常、重叠的问题。

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