网格布局下

按线放置

grid-column: 1 / 3 跨列；grid-row 同理。

grid-template-areas

用字符串模板命名区域，grid-area 指派，语义清晰。

对齐

justify-items、align-items、place-items 以及子项 justify-self、align-self。

小结

复杂版面先画网格线，再填内容，比纯浮动时代直观得多。