grid-template-areas 通过命名区域映射内容模块（如"img" "title"），提升语义性与可维护性；区域名须为单单词或连字符标识符，每行代表一行网格，点号表示空白，同一区域必须构成矩形；响应式宜用媒体查询重定义整个模板。
grid-template-areas 怎么用才能让卡片区域语义清晰又不写死尺寸
直接用 grid-template-areas 定义卡片结构，比纯数字行列定位更易读、更易维护。关键不是“画格子”，而是把卡片内容模块（如头图、标题、摘要、操作栏）映射到命名区域，再用 grid-area 分配元素。
- 每个区域名必须是单个单词或带连字符的标识符，不能含空格或引号，例如
"header"合法，"card header"会失效 - 模板字符串中每行代表一行网格，列数由该行最长的单词数决定；空格分隔不同列，点号
.表示空白单元格 - 同一区域名可跨多格，但必须构成矩形，L 形或凹形会导致布局崩溃
- 响应式时建议用媒体查询重写整个
grid-template-areas，而不是试图动态拼接字符串
/* 示例：三栏卡片在桌面端，单栏在手机端 */
.card {
display: grid;
grid-template-areas:
"img title title"
"img desc desc"
"img cta cta";
}
@media (max-width: 768px) {
.card {
grid-template-areas:
"img"
"title"
"desc"
"cta";
}
}grid-auto-flow: dense 配合 span 能否自动填满空洞
能填，但要小心——grid-auto-flow: dense 会让后续项目“插队”到前面空出的格子里，破坏源顺序，对可访问性和 SEO 不友好。它只适合视觉优先、内容无强线性逻辑的卡片墙（比如图片瀑布流），不适合含表单、步骤、阅读流的卡片。
- 仅当所有卡片都用
grid-column: span N或grid-row: span M显式声明跨度时，dense才有实际效果 - 若某张卡片设置了
grid-row-start: 3，而第 1 行留空，dense不会把它拉上去——它只对自动放置（auto-placed）的项目生效 - Chrome 和 Safari 对
dense的实现一致，但 Firefox 在某些嵌套 grid 下偶现错位，上线前务必真机测试
如何让卡片内元素（如按钮）在 grid 中垂直居中而不依赖 flex
不需要额外容器，直接用 align-self 和 justify-self 控制单个网格项。卡片本身是 grid 容器，它的子元素（如按钮）就是网格项，天然支持自我对齐。
-
align-self: center垂直居中（沿行轴），justify-self: center水平居中（沿列轴） - 若按钮需撑满所在网格区域，设
width: 100%; height: 100%即可，无需place-self——后者只影响位置，不控制尺寸 - 注意：如果父卡片设置了
grid-auto-rows: min-content，按钮高度可能被压缩，此时应改用minmax(40px, auto)保底
gap 和 padding 混用时卡片间距为什么忽大忽小
因为 gap 是网格容器内部行列之间的间距，而 padding 是卡片自身内边距，二者叠加后视觉距离 = gap + padding，容易超出预期。更隐蔽的问题是：当卡片设置了 border，且 box-sizing 为默认 content-box，padding 和 border 会进一步扩大总尺寸，导致换行错乱。
立即学习“前端免费学习笔记（深入）”；
- 统一用
gap控制卡片间距离，卡片自身用padding处理内容呼吸感，两者职责分离 - 所有卡片元素强制
box-sizing: border-box，避免 border 加 padding 导致宽度溢出 - 慎用
gap配合fr单位：例如grid-template-columns: 1fr 1fr; gap: 2rem，实际可用宽度 = (容器宽 - gap) / 2，不是简单除以 2
实际做复杂卡片时，最常被忽略的是 grid-template-areas 的矩形约束和 box-sizing 对 gap 计算的影响——前者导致布局突然塌陷，后者让响应式断点偏移几像素就错行。
