grid-template-areas通过区域命名实现直观布局，重点图跨多格（如"hero hero hero"），需引号包裹且行列对齐；搭配grid-auto-flow: dense可填充空隙，但仅作用于自动放置项。
Grid中用grid-template-areas快速定位重点图
突出某张图，本质是打破均分布局的视觉惯性。直接写grid-template-areas比算grid-column/grid-row更直观、不易错。它把布局变成“填字游戏”，重点图占大格，其余图自动填空。
常见错误是区域名拼错或漏写引号，比如写成grid-template-areas: header main sidebar（缺引号）会导致整行失效；或者"main main sidebar"里main和sidebar没对齐列数，浏览器会静默忽略该行。
- 每行区域名必须用双引号包裹，且列数严格一致
- 重点图对应区域名在多行重复出现（如
"hero hero hero"），普通图用单格名（如"pic1 pic2 pic3"） - 所有区域名最终要被
grid-area属性匹配到，否则对应元素不参与布局
grid-template-areas: "hero hero hero" "pic1 pic2 pic3" "pic4 pic5 pic6";
grid-auto-flow: dense让小图自动填满空隙
当重点图跨多行（比如grid-row: 1 / 4），默认情况下后续小图会从下一行开始排，留下大片空白。加grid-auto-flow: dense能强制 Grid 把能塞进去的小图提前安排，避免浪费空间。
但要注意：它只影响**自动放置**的项目（即没设grid-area或grid-column/grid-row的元素）。如果你给每张小图都手动指定了位置，这个属性就不起作用。
- 必须配合
grid-template-areas或grid-column/grid-row使用才有效 - 可能打乱 HTML 顺序对应的视觉流，对可访问性有轻微影响
- 在 Safari 旧版本（-webkit-grid-auto-flow: dense
用aspect-ratio统一图片比例，避免拉伸变形
相册里图源尺寸不一，靠width/height硬设容易糊或留白。现代方案是让容器自己守比例，再让图片object-fit: cover裁剪填充。
关键点在于：别给figure或div）设aspect-ratio。这样 Grid 能准确按比例分配空间，不会因图片加载延迟导致布局跳动。
- 支持度：Chrome 88+、Firefox 89+、Safari 15.4+；旧浏览器回退用
padding-top百分比 hack -
aspect-ratio: 4/3比aspect-ratio: 1.333更可靠，小数可能触发渲染异常 - 重点图可以单独设不同比例（如
aspect-ratio: 16/9），Grid 会自动重排其余项
响应式断点里慎用grid-template-columns: repeat(auto-fill, minmax(...)))
这种写法看着灵活，但和grid-template-areas一起用时容易冲突——因为auto-fill生成的列数不确定，而grid-template-areas要求每行列数固定。结果就是重点图错位、小图堆叠或溢出。
真正可靠的响应式做法是：为每个断点单独定义grid-template-areas，并配以对应的grid-template-columns。虽然代码多几行，但行为完全可控。
- 移动端优先：先写 3 列布局，再用
@media (max-width: 768px)切为 2 列，最后@media (max-width: 480px)切为 1 列 - 每次切换时，
grid-template-areas字符串里的引号行数必须和grid-template-columns列数一致 - 别试图用
repeat()混搭grid-area，那是自找 layout shift
重点图跨行跨列时，Grid 的隐式网格线会动态生成，但grid-row-end这类值如果写死数字（如grid-row: 1 / 4），在内容增减后极易错位；更稳的方式是用命名线（grid-row: 1 / span 3）或结合grid-area语义化控制。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
