B站首页采用响应式CSS Grid布局，核心是grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)))，配合aspect-ratio: 16/9、object-fit: cover及-webkit-line-clamp: 2三件套实现自适应视频卡片。
用 grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) 控制视频卡片列数
卡片列数不随屏幕缩放自动调整，是仿B站列表最常卡住的第一步。B站首页实际用的是响应式网格流，不是固定 3 列或媒体查询硬切。关键在 auto-fill + minmax(280px, 1fr) 这个组合：
– 280px 是卡片最小宽度（适配小屏手机竖屏）
– 1fr 表示“剩余空间均分”，不是固定像素
– auto-fill 保证容器空着也占位，避免最后一行只有一张卡片时拉宽变形
– 别写成 auto-fit，它会收缩空列，在某些浏览器下导致卡片忽宽忽窄
给 img 加 aspect-ratio: 16/9 和 object-fit: cover
B站缩略图全是 16:9，但原始图片尺寸五花八门。只设 width: 100% 会导致高度塌陷或拉伸变形：
– 必须加 aspect-ratio: 16/9 锁定容器比例（现代浏览器全支持，IE 不考虑）
– 再配 object-fit: cover 确保图片居中裁切，不压缩扭曲
– 别用 height: 100% 或 padding-top: 56.25% 的 hack 方式，维护成本高且和 flex/grid 不兼容
– 如果要兼容老浏览器，得 fallback 到 position: relative + ::before 伪元素撑高，但 2026 年已无必要
-webkit-line-clamp: 2 截标题必须配 display: -webkit-box
标题文字超长换行后撑开卡片高度，是仿B站最显眼的破绽。CSS 多行截断不是加个 text-overflow: ellipsis 就完事：
– 必须三件套齐上：display: -webkit-box、-webkit-box-orient: vertical、-webkit-line-clamp: 2
– 缺任意一个，Firefox 或 Safari 下直接失效
– 同时补 overflow: hidden，否则部分安卓 WebView 会漏出多余文字
– 别设 max-height，它按像素截断，可能把半行字砍掉，视觉极不干净
别碰 float 和 inline-block 布局视频卡片
网上很多“仿B站”教程还在用 float: left 或 display: inline-block，实际一上真机就露馅：
– float 遇到标题行数不同，立刻错位，且父容器高度塌陷需额外清浮点
– inline-block 默认有约 4px 文本间隙，这个间隙在不同字体、缩放比下浮动，导致列宽计算失准
– 两者都不支持基于容器宽度动态重排，必须靠多套 @media 维护，而 B 站首页是纯 CSS Grid 驱动的流式布局
– 现代项目里，display: grid 一行替代二十行 hack，才是真实生产逻辑
立即学习“前端免费学习笔记（深入）”；
