Flexbox 长期占据主流，但始终无法规避一维布局的天然短板。
在前端布局领域，Flexbox 一维布局长期占据主流，但始终存在无法规避的短板：仅能控制单方向对齐与分布，多行布局会出现行列高度不均、错位适配、复杂排版嵌套冗余等问题，做不了精准的二维并行布局。
CSS Grid 是 W3C 官方推出的唯一原生二维布局系统，专门解决同时控制行和列的布局需求，能够精准划分网页网格区域、自由控制元素跨行列排布，彻底弥补 Flexbox 的局限性。
目前所有现代浏览器（Chrome、Firefox、Edge、Safari）均全面兼容 Grid，无兼容壁垒，是企业级后台、官网、卡片流、瀑布流、复杂排版的首选布局方案。
所有属性的核心前提，先懂术语，再学规则。Grid 是二维网格布局，同时管理行（横向）和列（纵向）。
设置了 display: grid 的父元素，所有布局规则都在容器上定义，是整个网格系统的根。
网格容器的直接子元素，自动适配网格规则，无需额外设置浮动或弹性规则。
划分出来的行、列单元格的尺寸区域，分为行轨道和列轨道，是布局骨架。
分割轨道的横竖线条（列线、行线），是项目跨行列定位的依据，序号从 1 开始。
轨道与轨道之间的空白间距，不承载内容仅做分隔，使用 gap 设置。
多个相邻单元格合并后的整块区域，用于复杂布局排版，可自定义命名。
容器属性定义整体规则，项目属性控制单个元素，两者协作完成所有复杂布局。
两大核心属性，分别定义列的数量宽度、行的数量高度，支持多种单位混合使用。
核心取值方式：
px/em 固定尺寸 · % 百分比 · fr 剩余空间单位 · repeat() 重复函数 · minmax() 区间函数 · auto 自适应内容
替代老旧的 grid-gap，统一设置行列间距，不会产生布局挤压、不会超出容器。
优于 margin 间距：无外边距合并问题，不会引起布局塌陷，是网格间隙的首选方案。
分两层控制：项目在单元格内对齐 + 整体网格在容器内对齐。
通过网格线序号或 span 关键字，控制项目占据的行列范围，实现合并单元格效果。
控制超出定义行列的项目自动排布方向，dense 模式可填充空白网格。
dense 模式自动填充空位，解决跨行列后的留白问题，适配不规则卡片布局。
Grid 最强特性之一，通过自定义区域名称实现可视化布局，直观搭建复杂结构。
所有案例均为可直接复用的真实 Grid 实现，覆盖 90% 日常开发布局场景。左侧是实际渲染效果，右侧是源码。
自适应4列卡片布局，自动均分容器宽度，适配不同屏幕
宽侧边栏 + 双等宽主内容经典布局，混合固定尺寸与自适应
无需媒体查询，自动适配列数的弹性卡片布局
首图通栏、局部区块合并的图文布局，替代繁琐定位嵌套
通过区域命名直观搭建头部+侧边栏+主体+页脚标准后台布局
一行代码实现元素水平+垂直居中，比 Flex 居中更简洁
消除跨行列后的空白空位，自动填充紧凑排布
全局统一对齐前提下，单独修改某个项目的位置
替代传统 table 布局，样式自定义自由度更高
无需 JS、无需复杂计算，原生轻量化瀑布流
避坑指南与最优搭配，让你的 Grid 代码更稳健、更高效。
单行简单排布用 Flex，多行复杂栅格、精准布局用 Grid，两者结合使用，兼顾简洁性与功能性。
Grid 仅对直接子元素生效，孙子元素不参与网格布局，无需嵌套多余容器，这是常见误区。
fr 单位仅分配剩余空间，不会挤压固定尺寸元素，适配性极强，是 Grid 最核心的单位。
gap 间距不会叠加、不会超出容器，优先替代 margin 间距，避免布局塌陷问题。
auto-fit 用于自适应列数（拉伸填满），auto-fill 用于预留空位（保留列位），按需选用。
属性多但逻辑规整，一次学会终身复用。投入少量时间，换取长期布局效率的大幅提升。
无需媒体查询，适配所有设备的卡片布局，企业项目通用：