minmax与fr混用导致项宽不齐，因二者机制不同：minmax优先满足最小尺寸，fr分配剩余空间；内容溢出、未设box-sizing、未控项内行为等均会破坏一致性。
grid-template-columns 里 minmax 和 fr 混用为什么项宽还是不齐
因为
设的是单个轨道的尺寸范围，而
是剩余空间按比例分配——两者机制不同，混用时若没约束最小尺寸或内容溢出，
这类写法实际会优先满足
下限，导致小屏下所有列都卡在 200px，反而失去弹性。
中的
写成
并不表示“最多占 1 份”，而是“不超过当前可用空间中 1 份的计算值”，它仍受父容器宽度和其它轨道影响
如果某网格项内容很长（比如未折行的长单词或 URL），会强制撑开所在列，破坏整体比例
没有设置
或忽略 padding/margin，也会让视觉大小不一致
怎么让 grid 项视觉高度/宽度真正一致
关键不是只调
，而是控制项自身行为 + 轨道定义协同。常见有效组合：
列轨道用
，配合容器
和
，这是响应式均分的基础写法
每项加
和
，防止内部 flex/grid/文字撑破轨道（尤其 React/Vue 动态内容）
文字内容加
或
防止溢出
图片统一用
，避免默认 inline 基线对齐带来的高度差
fr 单位在什么情况下会失效或表现异常
本质是分配「剩余空间」，一旦轨道被内容、固定尺寸或
的
锁死，它就无空间可分。典型失效场景：
父容器
未设（比如
默认 100% body，但 body 没设
），导致计算上下文丢失
某列用了
，而内容宽度 > 300px，该列就脱离
控制
设置了
却忘了
，结果新增项仍按行
排列
，
不生效
使用了
这类函数，它优先按内容定宽，
被跳过
调试 grid 项大小不一致的三步检查法
打开 DevTools 后不要只看 Styles 面板，重点看 Layout 标签页里的 Grid overlay 和每个项的实际占用尺寸：
使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
下载
立即学习
“
前端免费学习笔记（深入）
”；
选中项 → 右侧 Layout → 看 “Grid Track Sizes” 是否显示各轨道计算值；若某列标为
或远大于预期，说明内容撑开了它
检查该项的
，对比其
和父级
定义是否冲突
临时加
到所有网格项，确认是内容溢出，还是轨道本身没均分（比如漏写了
或误用
）
最常被忽略的是：grid 项默认
，但若内部有
或
元素，会干扰高度拉伸逻辑。这时候加
反而更可控。
minmax()frminmax(200px, 1fr)200pxminmax(min, max)max1frbox-sizing: border-boxgrid-template-columnsrepeat(auto-fit, minmax(250px, 1fr)))display: gridgapmin-width: 0min-height: 0overflow: hidden; text-overflow: ellipsis; white-space: nowrap;word-break: break-word;img { width: 100%; height: auto; display: block; }frminmaxminwidthdivwidthminmax(300px, max-content)frgrid-auto-columns: 1frgrid-auto-flow: column1frfit-content(400px)frautocomputed width/heightmin-width/min-heightgrid-template-rows/columnsoutline: 2px solid redrepeat()auto-fillalign-items: stretchflexposition: absolutealign-items: start