用途
CSS Grid 规则用于在审查样式表、组件样式和响应式行为时，判断二维布局是否应改用 CSS Grid。它针对的是需要同时对齐行与列的场景，这类布局此前往往依赖 JavaScript 或复杂的 CSS 技巧实现。
主要能力
- 二维布局：使用 Grid 处理行和列两个方向；一维布局则使用 Flexbox。
- 命名布局区域：grid-template-areas 可在 CSS 中提供布局的可视化表示。
- 响应式网格：minmax() 与 auto-fill/auto-fit 结合，可创建无需媒体查询的响应式网格。
- 子网格：subgrid 允许嵌套元素对齐到父网格的轨道。
使用方式
该规则提供四种操作：
- Check（检查）：查找样式中试图同时控制行和列的基于浮动或 Flexbox 的布局，它们可能更适合用 CSS Grid 实现。
- Fix（修复）：将二维布局转换为使用 CSS Grid，配合适当的 grid-template-columns、grid-template-rows 和 grid-template-areas。
- Explain（讲解）：解释 CSS Grid 基础概念，包括轨道、单元格、区域、fr 单位、minmax，以及 auto-fill 与 auto-fit 的区别。
- Code Review（代码审查）：审查与二维布局相关的样式表、组件样式和响应式状态，指出在渲染 UI 中违反该规则的具体选择器、声明或断点。
完整的实现细节、代码示例和框架相关指导见 references/rule.md。规则页面：https://frontendchecklist.io/en/rules/css/css-grid
适用场景
适用于前端开发中审查 CSS 布局、组件样式和响应式设计的环节，尤其是当布局需要同时处理行与列对齐、命名区域或自适应网格时。
限制
资料未提供该规则的具体实现代码、框架适配细节、收费或价格信息，相关细节需查阅 references/rule.md 与规则页面。