写页面布局还在用 float 套 margin 硬凑，一改需求全错位?CSS Grid 的“grid 设置”就是把父元素变成二维网格容器，行和列一起管，卡片墙、后台框架、表单栅格一次定型。核心就一句：先给父盒加 display: grid，再用 grid-template-* 画行列，gap 控间距，子项用 grid-column/row 或 grid-area 落位 。
直接子元素自动变 grid item，按先后顺序填单元格 。
行列值有几种常用写法，混用最实用：
固定值 px / rem：侧边栏、表头
fr 分数单位：剩余空间按比例分，2fr 1fr 1fr 就是第一列占一半
repeat(4, 1fr)：等价 1fr 1fr 1fr 1fr，多列别手敲
minmax(200px, 1fr)：最小 200px、最大撑满，响应式卡片必备
repeat(auto-fill, minmax(240px, 1fr))：视口窄自动换行，零媒体查询做卡片墙
子项跨区用网格线编号：grid-column: 1 / 3 跨第1到第3列线(占两列)，grid-row: 2 / span 3 从第2行起跨3行;整行通栏写 grid-column: 1 / -1(-1 是末线)。
