用grid实现杂志风排版需三步：先用grid-template-areas命名区域搭骨架，再以grid-auto-flow:dense让小图自动填空，最后用跨列（如grid-column:1/-1）与object-fit控制大图自适应——兼顾错落感与稳重性。
用 Grid 做杂志风不规则大图排版，核心不是“把图塞进去”，而是用命名区域搭骨架、用 dense 填空、用跨格控制视觉重心——三步就能做出《Wallpaper*》那种错落又稳重的效果。
用 grid-template-areas 定义视觉主干
先画出你心里的杂志版面：头图占两行三列、主文偏左、侧栏窄而高、引言浮在右上……这些不用算线号，直接用字符串写出来：
- 每行用一对引号，空格分隔区域名，. 表示留空，比如：
"hero hero hero ."表示头图占前三列，第四列空着 - 跨行区域必须重复写名字，双行头图就写两行
"hero hero hero ."和"hero hero hero ." - 所有行的列数必须一致，否则整条声明失效；区域名只能是小写字母或短横线，比如
lead可以，lead-text也行，但lead text就不行 - 子元素用
grid-area: hero对应，别加引号，也别大小写混用
让小图自动填满大图留下的空隙
杂志里常有主图+若干小图卡片的组合。如果只设列宽，小图会老老实实排队，下面空一大片。这时加一句：
-
grid-auto-flow: dense—— 它会让后续没指定位置的小图回头找空位塞进去，实现“错落感” - 仅对没写
grid-row/grid-column的元素生效，所以主图要显式定位（比如用grid-area: hero），小图保持“自动”状态 - 搭配
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr))，宽度自适应，dense 才有空可填
大图跨格 + 内部对齐，避免拉伸变形
一张横跨三列的大图，如果只设 width: 100%，在不同屏幕下容易被压扁或留白。得从网格层控制：
- 给大图容器设
grid-column: 1 / -1（从第一列线到最后一列线），不管几列都撑满，比写死1 / 4更安全 - 图片本身用
width: 100%; height: auto;保比例；若想居中显示局部，加object-fit: cover;和object-position: center; - 文字内容在大图上叠加时，用
justify-self: center; align-self: end;控制位置，而不是靠 margin 推
响应式不崩的关键：不动区域名，只调轨道
手机上看不能还挤三栏。别在媒体查询里重写整个 grid-template-areas，那样容易漏引号、错空格。正确做法是：
- 小屏（
max-width: 768px）设grid-template-columns: 1fr，所有区域垂直堆叠，区域名不变 - 中屏加
grid-template-columns: 2fr 1fr，让main变宽、sidebar变窄，视觉权重自然调整 - 大屏可加
grid-template-rows: 120px auto 80px显式控高，防止头图被内容撑变形
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
