你现在用固定33%设置列宽的写法，在移动端确实会出现盒子过窄的问题，只要调整grid-template-columns的写法就能解决，核心是利用Grid布局的minmax()函数来精准控制列的最小和最大宽度。

方案一：保持3列布局，强制最小宽度200px #

如果希望始终维持3个盒子在一行的布局，哪怕屏幕过小需要横向滚动，也不让盒子窄于200px，把代码改成这样：

.wrapper {
  display: grid;
  grid-template-columns: repeat(3, minmax(200px, 1fr)); /* 核心修改 */
  grid-gap: 10px;
  background-color: #fff;
  color: #444;
}
.box {
  background-color: #444;
  border-color: #Dd6161;
  /* 你的其他样式 */
}

这里minmax(200px, 1fr)的意思是：每列宽度最小不低于200px，最大均分容器宽度的1/3。当容器宽度≥600px（3×200px）时，每个盒子自动占满1/3宽度；当容器宽度小于600px时，每个盒子固定为200px，超出容器的部分会横向滚动，彻底避免了盒子过窄的问题。

方案二：自适应换行，移动端自动调整列数 #

如果希望在屏幕不够宽时自动换行（比如小屏显示1列、中屏显示2列、大屏保持3列），那就结合auto-fit和minmax()实现响应式布局：

.wrapper {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); /* 核心修改 */
  grid-gap: 10px;
  background-color: #fff;
  color: #444;
}
.box {
  background-color: #444;
  border-color: #Dd6161;
  /* 你的其他样式 */
}

auto-fit会自动根据容器宽度调整列数：当容器能放下3个≥200px的盒子时，显示3列；放不下时，自动减少列数（比如2列或1列），同时让每列尽可能占满可用宽度，既保证了盒子不会过窄，又完美适配了不同尺寸的屏幕。

这两种方案都能满足你的核心需求，你可以根据实际的交互场景选择~

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