写惯了 Flexbox 的人第一次接触 Grid，最容易卡住的地方不是语法，而是思维：Grid 是先画格子、再放内容，而 Flex 是先有内容、再谈排列。
一、先定义容器，再定义轨迹
display: grid 之后，用 grid-template-columns 和 grid-template-rows 画出轨道。比如 repeat(auto-fill, minmax(220px, 1fr)) 一行就能实现响应式卡片栅格，不需要媒体查询。
二、区域命名比坐标更好维护
用 grid-template-areas 给区域起名字，再让子元素 grid-area 认领。布局意图一目了然，后期调整只改模板这一处。
三、间距用 gap，别再掏 margin
Grid 的 gap 属性天然不会在容器边缘产生多余间距，比用负 margin 清除间距的老办法干净得多。
四、什么时候还是该用 Flex
单行/单列的内容流、不确定数量的元素排列，Flex 依然更合适。两者是互补关系：外层定结构用 Grid，内部排内容用 Flex。
五、兼容性可以放心
Grid 在主流浏览器的支持已经覆盖多年，除非要兼容很老的浏览器，否则可以放心作为主力布局方案。
