display: grid 创建块级网格容器，独占整行并默认撑满父容器，适用于页面整体布局；display: inline-grid 创建内联级网格容器，可与其他元素同行排列，宽度由内容决定，适合嵌入文本流或工具栏等场景。两者功能相同但文档流行为不同，选择依据容器在布局中的排列需求。
在使用 CSS Grid 布局时，display: grid 和 display: inline-grid 是两个定义网格容器的关键属性。它们的功能几乎相同，都能开启网格布局系统，但核心区别在于布局中的显示类型和文档流行为。
grid：块级网格容器
当设置 display: grid 时，元素成为一个块级网格容器。这意味着：
- 它会像 div 一样占据一整行，默认宽度为父容器的 100%
- 它会独占一行，前后都会换行
- 可以设置宽度、高度、margin 等块级样式
适用于大多数页面布局场景，比如整体页面结构、卡片容器、表单布局等。
inline-grid：内联网格容器
当设置 display: inline-grid 时，元素成为内联级网格容器。它的特点包括：
立即学习“前端免费学习笔记（深入）”；
- 不会独占一整行，多个 inline-grid 容器可以在同一行并排显示
- 其宽度由内容和网格列宽决定，而不是撑满父容器
- 表现类似于 span 或 img 这类内联元素，但仍能使用完整的 grid 布局功能
适合用于需要嵌入文本流或与其他内联元素同行排列的场景，比如工具栏中的按钮组、内联数据卡片等。
实际对比示例
假设两个网格容器都设置了相同的列数和间距：
- 使用 grid 的容器会各自独占一行，垂直堆叠
- 使用 inline-grid 的容器则可能并排显示，直到父容器换行
可以通过添加 border 或背景色清晰看出它们在文档流中的不同表现。
基本上就这些。选择哪个取决于你希望容器在页面中如何参与布局流——需要独立成块就用 grid，希望并排排列就考虑 inline-grid。不复杂但容易忽略。
