不能直接控制宽高比，fr仅分配剩余空间比例，海报宽高比需靠aspect-ratio或padding-bottom配合width:100%实现，跨列用grid-column:span，错落感依赖显式高度与跨列组合。
grid-template-columns 里混用不同 fr 值真能控制海报宽高比？
不能直接控制宽高比，fr 只管分配剩余空间的**比例份额**，不管容器自身长宽。所谓“电影海报墙”的错落感，本质是靠列轨道数量 + 单元格跨列 + 显式高度（或 aspect-ratio）配合出来的。
-
1fr 2fr 1fr表示三列，中间列占总可用宽度的一半，但每列内元素仍按自身内容撑开——海报图若没设height或aspect-ratio，照样会变形或留白 - 真正起作用的是：给
.poster元素加aspect-ratio: 2/3（竖版海报常见），再配合width: 100%，让高度随宽度自适应 - 如果要模拟“2张小海报并排 ≈ 1张大海报宽度”，就得用
grid-column: span 2控制跨列，而不是靠 fr 比例“猜”尺寸
为什么只写 grid-template-columns: 1fr 1fr 2fr 会让所有海报一样高？
因为 Grid 默认对齐方式是 align-items: stretch，它会强行拉伸每个网格项填满行高——而行高由该行中**最高那个单元格**决定。一旦某张海报内容多、文字多、或图片加载慢导致占位盒高，整行都会被它带高。
- 解决方法不是调 fr，而是关掉拉伸：
align-items: start或align-items: flex-start - 更稳妥的做法是统一控制高度：给
.poster设height: 0; padding-bottom: 150%（配合position: relative和绝对定位子元素），或者直接用aspect-ratio: 2/3（现代浏览器支持良好） - 注意
aspect-ratio在 Safari 15.4+ 才稳定支持，旧版本需降级为 padding-bottom 技巧
grid-auto-flow: dense 能自动填空，但为啥海报顺序全乱了？
grid-auto-flow: dense 的作用是“把后面的小格子塞进前面留下的空洞”，但它不保证 DOM 顺序和视觉顺序一致——尤其当你用 grid-row/grid-column 手动指定位置时，dense 会为了填空打乱渲染流。
- 电影海报墙通常需要保持 HTML 顺序（比如按上映时间排），此时绝不能开
dense - 想实现错落又保序？老实用
grid-column: span 1 / span 2显式声明跨列，并接受某些行末尾留白 - 如果必须动态填空（比如响应式下不同屏幕列数变化），就别手动设
grid-row，让 Grid 自动布局，再用order微调顺序
移动端缩放后海报变形，是不是 fr 单位不靠谱？
不是 fr 的问题，是没切断宽度和高度的耦合。用 width: 100%; height: auto 放图，缩放时宽变高不变，必然压扁；用 width: 100%; aspect-ratio: 2/3 才能稳住比例。
立即学习“前端免费学习笔记（深入）”；
- 别在
grid-template-columns里混用fr和固定值（如200px）来“适配手机”——这会让小屏下出现横向滚动，破坏体验 - 正确做法：用
minmax(280px, 1fr)替代纯fr，保证单列最小宽度，同时允许弹性伸缩 - 关键细节：给
img加object-fit: cover，否则aspect-ratio生效后图片会被裁切——这是最容易漏掉的一步
aspect-ratio 和 object-fit 必须成对出现，以及 align-items: stretch 在背后悄悄拉高整行。 
