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

问题:

同样的前端代码样式 在不同电脑会导致样式长度溢出 都是使用 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>

解决效果:

相关推荐
YGY Webgis糕手之路2 小时前
OpenLayers 综合案例-轨迹回放
前端·经验分享·笔记·vue·web
90后的晨仔2 小时前
🚨XSS 攻击全解:什么是跨站脚本攻击?前端如何防御?
前端·vue.js
Ares-Wang2 小时前
JavaScript》》JS》 Var、Let、Const 大总结
开发语言·前端·javascript
90后的晨仔2 小时前
Vue 模板语法完全指南:从插值表达式到动态指令,彻底搞懂 Vue 模板语言
前端·vue.js
德育处主任3 小时前
p5.js 正方形square的基础用法
前端·数据可视化·canvas
烛阴3 小时前
Mix - Bilinear Interpolation
前端·webgl
90后的晨仔3 小时前
Vue 3 应用实例详解:从 createApp 到 mount,你真正掌握了吗?
前端·vue.js
德育处主任3 小时前
p5.js 矩形rect绘制教程
前端·数据可视化·canvas
前端工作日常3 小时前
我学习到的babel插件移除Flow 类型注解效果
前端·babel·前端工程化
前端工作日常4 小时前
我学习到的 Babel 配置
前端·babel·前端工程化