用 CSS Grid 实现响应式卡片布局需设 minmax(300px, 1fr) 轨道、两级媒体查询断点（768px/1024px）、clamp() 控制 gap，并采用语义简洁的 section 结构、懒加载图片、安全外链及 GPU 友好 hover 动效。
用 display: grid 实现响应式项目卡片布局
纯 CSS Grid 就能撑起作品集的骨架，不用 JS 或框架也能自适应不同屏幕。关键不是“怎么写”，而是“怎么设断点和轨道”。
常见错误是直接写 grid-template-columns: repeat(3, 1fr)，结果小屏上卡片被压扁、文字换行错乱；或者加了 @media 却只改列数，没调 gap 和 minmax()，导致间距崩塌。
- 用
minmax(300px, 1fr)替代固定1fr，保证单卡最小宽度不被压缩 - 移动端优先：默认设
grid-template-columns: 1fr，再在768px和1024px两级加@media -
gap建议用clamp(1rem, 4vw, 1.5rem)，避免小屏间隙过大、大屏过小
项目卡片 HTML 结构别套“教程模板”
很多示例用 <article> + 多层 <div> 套娃，实际维护时改个标题都要扒三层。作品集页面不是语义考试，可读性和可维护性更重要。
错误结构：<div class="card"><div><div><h3>…</h3></div></div></div> —— 没必要。
立即学习“前端免费学习笔记（深入）”；
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 每张卡片用一个
<section>包住，内部直出<h3>、<p>、<a>，最多一层 wrapper - 图片必须带
loading="lazy"和alt，否则首屏加载慢、SEO 友好度归零 - 链接用
<a href="https://github.com/xxx" target="_blank" rel="noopener">，漏掉rel有安全风险
hover 动效别硬套 transform + transition 全家桶
加个悬停上浮效果本意是提升交互感，但全网抄来的 transform: translateY(-5px) + transition: all 0.3s 在低配设备上容易掉帧，尤其卡片里含图片或字体图标时。
典型现象：鼠标划过时卡片“抖一下”才动，或者多个卡片同时 hover 出现延迟累积。
- 只对
transform和opacity做过渡（它们走 GPU 合成），禁用all - 加
will-change: transform到卡片容器，但仅限 hover 触发前——不要写死在 CSS 里 - 真要加阴影变化，用
box-shadow: 0 4px 12px hsla(0,0%,0%,0.1)而非渐变色或大模糊值，后者重绘成本高
本地预览时 file:// 协议下图片/字体加载失败
写完一刷新全是空白图和默认字体？大概率是你双击 HTML 文件直接打开，浏览器以 file:// 协议运行，现代浏览器会拦截跨源资源（哪怕只是本地图片）。
错误做法：把路径改成绝对路径如 C:/users/xxx/portfolio/img/project1.jpg —— 换台电脑就挂。
- 开发阶段必须用本地服务，命令行跑
npx serve或python3 -m http.server 8000 - 所有资源路径用相对路径，如
./img/logo.svg，别用../往上爬太多级 - 字体用
@import url('https://fonts.googleapis.com/css2?family=Inter');，别下载 TTF 本地引，增加部署负担
作品集最常被忽略的其实是路径健壮性和协议兼容性——写得再漂亮，本地打不开或换环境就裂开，等于没写。
