用 display: grid 搭作品集模块更稳，关键在 grid-template-areas 划分区块与 minmax() 控制卡片最小可读宽度；hero 用 minmax(60vh, 1fr)，projects 用 repeat(auto-fit, minmax(300px, 1fr)) 和 clamp() 调 gap，嵌套 grid 处理 hero 内部布局，避免多层嵌套。
直接用 display: grid 搭作品集模块，比套框架或写一堆 media query 更稳——关键不是“能不能做”，而是怎么设 grid-template-areas 和怎么控制卡片的最小可读宽度。
用 grid-template-areas 划分主页大区块
把作品集页拆成 header、hero、projects、about、contact、footer 这几块，用命名区域一眼看清结构：
.page {
display: grid;
grid-template-areas:
"header"
"hero"
"projects"
"about"
"contact"
"footer";
grid-template-rows: auto minmax(60vh, 1fr) auto auto auto auto;
}
每个区块加 grid-area: xxx 就能对号入座。小屏下保持垂直堆叠，不用改 HTML；大屏想让 about 和 contact 并排？只改 grid-template-areas 一行就行：
grid-template-areas: "header" "hero" "projects" "about contact" "footer";
- 别在
grid-template-areas里留空格或换行不一致，否则解析失败 -
grid-template-rows用minmax(60vh, 1fr)是为了hero区域既撑满视口又不压垮内容 - 命名区域名必须全小写、无特殊字符，否则
grid-area匹配不上
projects 卡片网格用 repeat(auto-fit, minmax())
作品列表不能写死 grid-template-columns: 1fr 1fr 1fr，否则小屏三列挤成豆腐块。换成：
.projects {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: clamp(1rem, 4vw, 1.5rem);
}
这行代码实际效果是：宽度 ≥ 300px 就尽可能多列，窄到 300px 以下自动退成单列。
-
auto-fit会合并空轨道，auto-fill则保留空位，这里选auto-fit更干净 -
gap用clamp()而非固定值，避免手机上间隙过大、4K 屏上几乎看不见 - 卡片内部别设
min-width，否则窄屏触发横向滚动——靠minmax()控制外层就够了
嵌套 Grid 处理 hero 或项目详情页
hero 区域常含标题 + CTA 按钮 + 图标，它自己就是个子网格容器：
.hero {
display: grid;
grid-template-areas: "title cta" "icon cta";
grid-template-columns: 1fr max-content;
grid-template-rows: auto auto;
align-items: center;
gap: 1rem;
}
.title { grid-area: title; }
.cta { grid-area: cta; }
.icon { grid-area: icon; }
这种嵌套不增加 DOM 层级，也不依赖 JS，纯 CSS 就能对齐和响应式重排。
- 子网格的
grid-template-areas独立于外层，命名冲突也没关系 - 如果
icon在小屏要移到标题下方，直接在@media (max-width: 768px)里重写它的grid-area和grid-template-areas即可 - 嵌套层级别超过两层，维护成本会陡增——
projects卡片内部用 flex 更轻量
真正容易被忽略的是 gap 的单位选择和 minmax() 的下限值。300px 不是玄学数字，它对应手机横屏时仍能清晰阅读项目标题的最小宽度；而 clamp(1rem, 4vw, 1.5rem) 中的 4vw 是实测在 375px–1440px 屏宽间过渡最自然的系数——调完记得在真机上滑动缩放看三次。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
