用 CSS Grid 实现响应式书架网格的核心是 grid-template-columns: repeat(auto-fit, minmax(240px, 1fr))，配合 gap: 1.5rem、卡片内 flex-column 布局、封面图 aspect-ratio: 2/3 + object-fit: cover、交互仅用 transform/opacity 避免重排，以及文字用 -webkit-line-clamp 和 clamp() 自适应截断。
用 CSS Grid 实现响应式书架网格，别碰 float 和 inline-block
Grid 是目前最干净、可控性最强的书架布局方案。float 容易塌陷、inline-block 有看不见的间隙，两者在书本卡片高度不一致时都会导致错行或留白异常。
关键不是“怎么排成格子”，而是“怎么让每本书的卡片高度自适应内容，同时保持列对齐”。Grid 的 grid-template-columns + minmax() + auto-fit 组合能自动适配屏幕宽度，且不依赖 JS。
-
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr))—— 最小 240px 宽度，超出则均分剩余空间，比auto-fill更少空列 - 给容器设
gap: 1.5rem，比用 margin 控制间距更可靠，不会影响 grid item 的盒模型计算 - 每张书卡用
display: flex; flex-direction: column管理内部结构（封面图、标题、作者），避免因文字长度不同导致卡片高度撕裂
图片封面不拉伸、不裁剪、居中显示的写法
书架页最常被忽略的是封面图渲染质量。直接设 width: 100%; height: 300px; object-fit: cover 会强制裁剪，丢失关键信息；用 contain 又留大片白边。
真实出版物封面比例差异大（竖版小说 vs 横版画册），稳妥做法是固定宽高比 + 居中截取关键区域：
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
立即学习“前端免费学习笔记（深入）”；
- 外层容器设
aspect-ratio: 2/3（常见图书比例），配合overflow: hidden - 内层
<img>设width: 100%; height: 100%; object-fit: cover; object-position: center - 如果需兼容旧浏览器，用伪元素 + padding-bottom 技巧替代
aspect-ratio，但现代项目优先用原生属性
点击书卡跳转详情页时，如何避免布局抖动
加 cursor: pointer 和 transition: transform 0.2s 很容易，但用户 hover 或点击瞬间，若卡片突然变高（比如加了 box-shadow 或 border），会导致下方所有书卡整体下移——这是书架页最刺眼的体验破绽。
- 所有交互效果必须基于
transform和opacity，这两者不触发重排（reflow） - 阴影统一用
box-shadow: 0 4px 12px rgba(0,0,0,0.08)，不要加border或改变height - 如果要做“悬停放大”，用
transform: scale(1.02)，而非改 width/height - 确保所有书卡初始状态已有相同
box-shadow（哪怕透明），避免 hover 时从无到有引发重排
移动端书卡文字溢出处理：title 和 author 都要截断，但不能简单用 text-overflow
一行显示不完的书名，用 text-overflow: ellipsis 是基础，但只加在 white-space: nowrap 上会导致中文断字难读；作者名多为“译者：XXX”或“编者：XXX”，截断位置更要合理。
- 书名用两行截断：
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden - 作者行限制单行，但保留“译者”“主编”等前缀语义：
text-overflow: ellipsis; white-space: nowrap; overflow: hidden - 避免给
font-size设固定 px 值，用rem或clamp(0.875rem, 4vw, 1rem)让文字随视口缩放，否则小屏上文字撑破卡片
Grid 列数和卡片最小宽度的平衡点往往需要实测：240px 在 iPad 上刚好两列，但在 iPhone SE 上会变成一列，这没问题；但如果设成 200px，某些安卓小屏可能因像素密度问题出现第三列半截卡片——这种边界情况得真机调试，不能只看 Chrome 模拟器。
