前端样式CSS设置 display: ‘grid‘, gridTemplateColumns: ‘repeat(4, 1fr)‘ 部分电脑展示内容溢出

孜然卷k2025-06-11 14:18

问题：

同样的前端代码样式在不同电脑会导致样式长度溢出都是使用 display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)'

正常样式：

异常样式：

当前相同代码：

html 复制代码

<div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 20 }}>
  {zrjList.map((item: any, index) => {
    return <div/>
  })}
</div>

问题排查：

现场排查发现部分电脑分辨率高些并且电脑使用200%缩放就会导致这种问题出现

而部分分辨率较低使用125%缩放就不会出现这种问题

解决方案：

设置 `min-width: 0` 防止 Grid 子项溢出。

html 复制代码

<div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 20 }}>
  {zrjList.map((item: any, index) => {
    return <div style={{
                     minWidth: 0,    // 允许内容收缩
                     overflow: 'hidden' // 处理长文本/图片
                  }}
        
    />
  })}
</div>