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

最新推荐文章于 2025-07-10 00:01:55 发布

孜然卷k

最新推荐文章于 2025-07-10 00:01:55 发布

阅读量293

点赞数 8

CC 4.0 BY-SA版权

文章标签：前端 css

本文链接：https://blog.youkuaiyun.com/M_E_i/article/details/148553322

问题：

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

正常样式：

异常样式：

当前相同代码：

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

问题排查：

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

解决方案：

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

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