CSS Grid 响应式卡片布局推荐用 repeat(auto-fit, minmax(300px, 1fr)) 实现自适应列数，结合语义化 <article> 结构、loading="lazy" 图片优化及无障碍悬停设计，兼顾性能与可访问性。
用 CSS Grid 实现响应式文章卡片栅格布局
直接用 display: grid 控制列数比浮动或 Flex 更稳，尤其在不同屏幕宽度下。新手容易写死列宽（比如固定 250px），结果小屏溢出或大屏留白太多。
推荐用 minmax() + auto-fit 组合：
article-list {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 1.5rem;
}
-
300px是最小卡片宽度，低于此值自动换行 -
1fr让剩余空间均分，避免右侧空隙 - 别漏掉
gap，否则卡片紧贴，视觉拥挤 - 移动端无需额外媒体查询，Grid 自动适配
标题、摘要、元信息的语义化结构与间距控制
新手常把所有内容塞进 <div>，既不利于 SEO，也加大后期样式调试成本。用原生语义标签能省掉一堆 class 和 JS 逻辑。
标准结构建议：
立即学习“前端免费学习笔记（深入）”；
<article>
<header>
<h2><a href="post.html">文章标题</a></h2>
<p class="meta">2024-06-12 • 3 分钟读完</p>
</header>
<p class="excerpt">这里是摘要文字……</p>
<footer><a href="post.html">阅读全文 →</a></footer>
</article>
-
<article>是必须的容器，告诉浏览器这是独立内容单元 -
<header>和<footer>包裹元信息和操作链接，语义清晰 - 用
margin-bottom控制段落间距，别依赖多个<br> - 摘要文字限制行数可用
line-clamp，但注意 Safari 需加-webkit-前缀
悬停效果与可访问性之间的平衡
加 hover 动画很直观，但新手常忽略键盘用户和触屏设备。纯 :hover 在 iPad 或 Windows 触屏模式下可能失效，且对屏幕阅读器不友好。
- 悬停时只改变
transform或opacity，避免触发布局重排（reflow） - 给
<a>加outline: none前，务必替换为outline: 2px solid #007bff等可见焦点样式 - 不要仅靠颜色变化表示状态（如仅变蓝），搭配图标或文字提示更稳妥
- 卡片整体可点击区域应包裹整个
<article>，而不是只让标题可点
加载性能与图片懒加载的实际落地
博客列表里每篇文章带缩略图，没处理好就拖慢首屏。新手容易直接写 <img src="...">，结果页面一打开就发起十几张图请求。
- 必须用
loading="lazy"属性，现代浏览器原生支持，无需 JS 库 - 缩略图优先用
<picture>+<source>提供 WebP 格式， fallback 到 JPEG - 避免在 CSS 中用
background-image加载缩略图——它无法被loading="lazy"控制 - 如果用
width/height固定尺寸，记得设aspect-ratio: 16/9防止内容抖动
真正卡顿的地方往往不是样式复杂度，而是没关掉无意义的图片请求或用了阻塞渲染的内联脚本。样式写完后，打开 Chrome DevTools 的 Network 面板刷一次，盯着 Img 类型请求看数量和大小。
