Front-End-Checklist 之 CSS Grid 二维布局规则从基础语法到工程级落地指南【免费下载链接】Front-End-Checklist The essential checklist for modern web development, for humans and AI agents项目地址: https://gitcode.com/gh_mirrors/fr/Front-End-Checklist本文基于 Front-End-Checklist 仓库中的 CSS Grid 规则文档skills/css-grid/references/rule.md展开。该仓库是一份面向「人类与 AI Agent」的现代 Web 开发必备清单其中css-grid规则专门解决同时控制行与列的二维布局问题。读完本文你将掌握Grid 与 Flexbox 的正确选型依据、fr/minmax()/auto-fill等核心单位的实战用法、命名模板区域与 Subgrid 的高级技巧以及如何用规则文档中的检查—修复—验证工作流在真实项目中落地这套规范。CSS Grid 是 CSS 中最强大的布局系统专为需要同时控制行rows与列columns的二维布局设计。在本仓库中它对应一条 priority 为 medium、难度为 intermediate、预计耗时 25 分钟的审查规则见 packages/content/rules/en/css/css-grid.mdx 的 frontmatter并被封装成 Agent 可直接调用的技能文件 skills/css-grid/SKILL.md。规则核心何时应该使用 CSS Grid规则的tldr定义非常精炼二维布局行和列同时存在用 Grid一维布局用 Flexboxgrid-template-areas能在 CSS 中可视化地声明页面结构minmax()与auto-fill/auto-fit可以写出不需要媒体查询的响应式网格subgrid允许嵌套元素对齐到父级网格的轨道tracks。理解这一选型标准是掌握本规则的第一步。一维场景导航栏、按钮组、单行/单列、单个元素居中交给 Flexbox而整页布局、卡片网格、任何涉及同时对齐两轴的需求都是 Grid 的主场。为什么重要Grid 解决了什么问题规则文档Why It Matters指出CSS Grid 解决的是过去需要 JavaScript 或复杂 CSS 技巧才能完成的布局问题——同时在两条轴上对齐元素、创建命名的布局区域、构建随内容自适应的响应式网格。用 Flexbox 强行实现二维布局往往只能通过固定宽度之类的 workaround 来凑合而固定宽度恰恰会在响应式场景下最先崩溃。仓库中与 Flexbox 对应的规则 skills/flexbox-patterns/references/rule.md 也印证了二者的分工Flexbox 三个核心属性flex-grow、flex-shrink、flex-basis只解决一维主轴上的伸缩问题无法表达第 2 行第 3 列这类坐标语义。快速上手两个最常用的 Grid 模式规则文档给出的第一个代码示例覆盖了 90% 的日常卡片布局需求/* ✅ 简单的三列网格 */ .card-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; } /* ✅ 无需媒体查询的响应式网格 */ .card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1.5rem; } /* 容器能容纳多少 280px 的列就生成多少列 —— 自动响应式 */两个要点值得展开repeat(3, 1fr)1frfraction unit表示剩余空间的一份三列1fr即三等分可用宽度完全不需要计算百分比。与 Flexbox 的flex: 1不同fr作用于轨道track本身天然支持行与列两个方向。repeat(auto-fill, minmax(280px, 1fr))minmax()定义轨道的最小与最大尺寸auto-fill让浏览器在容器宽度变化时自动增加或减少列数。这是无媒体查询响应式的核心组合也是 packages/content/rules/en/css/css-grid.mdx 中explainprompt 明确要求讲解的考点tracks、cells、areas、fr 单位、minmax以及 auto-fill 与 auto-fit 的区别前者在容器有多余空间时保留空轨道后者会折叠空轨道让项目铺满。命名模板区域把布局画在 CSS 里规则文档强调grid-template-areas是可视化的布局声明——用 ASCII 图形直接在 CSS 中表达页面结构这是 Grid 区别于其他布局方案最直观的优势/* ✅ 可视化布局声明 */ .page-layout { display: grid; grid-template-columns: 280px 1fr; grid-template-rows: auto 1fr auto; grid-template-areas: header header sidebar main footer footer; min-height: 100vh; } .page-header { grid-area: header; } .page-sidebar { grid-area: sidebar; } .page-main { grid-area: main; } .page-footer { grid-area: footer; } /* 移动端响应式折叠为单列 */ media (max-width: 768px) { .page-layout { grid-template-columns: 1fr; grid-template-areas: header main sidebar footer; } }这是一个典型的Holy Grail 布局页头 侧边栏 主内容 页脚。要点grid-template-rows: auto 1fr auto让主内容区撑满剩余垂直空间min-height: 100vh保证整页铺满视口grid-area: header等声明把子元素贴到对应命名区域无需关心行列坐标移动端只需重排grid-template-areas的字符串DOM 顺序可以保持不变——注意示例中sidebar在main之后出现这正是 Grid 允许视觉顺序与 DOM 顺序解耦的体现。minmax() 与 fr 单位弹性与下限兼得规则文档用两个例子说明minmax()的核心价值——给轨道同时设定最小与最大约束.layout { display: grid; /* 第一列200px 到 300px 之间弹性变化第二列填充剩余空间 */ grid-template-columns: minmax(200px, 300px) 1fr; /* 三列等宽每列最小 150px */ grid-template-columns: repeat(3, minmax(150px, 1fr)); }实战中minmax()最典型的两个场景可压缩侧边栏minmax(200px, 300px)让侧边栏在 200px~300px 之间伸缩配合1fr主区域天然避免内容溢出保底列宽repeat(3, minmax(150px, 1fr))保证每列至少 150px容器过窄时轨道会溢出或触发换行取决于外层设置不会出现列被压到不可读的宽度。显式放置精确控制元素的跨行跨列当需要让某个元素突出时使用显式放置Explicit Placement语法.featured-card { /* 跨 2 列 2 行 */ grid-column: 1 / 3; grid-row: 1 / 3; } /* 命名网格线 */ .container { grid-template-columns: [start] 1fr [center] 1fr [end]; } .full-bleed { grid-column: start / end; }grid-column: 1 / 3是起始线 / 结束线的简写也可写作span 2跨两条轨道命名网格线named lines让grid-column: start / end这类声明比数字更易读、更不易随结构调整而失效适合通栏元素full-bleed等场景。Subgrid嵌套元素对齐父级轨道规则文档指出Subgrid 解决的是卡片内部元素跨卡片对齐的经典难题/* 卡片内部元素对齐到父级网格 */ .card-grid { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: auto auto 1fr auto; } .card { display: grid; grid-row: span 4; grid-template-rows: subgrid; /* 继承父级的行轨道 */ } /* 现在所有卡片的标题、描述、CTA 都能跨卡片对齐 */含义解读父网格定义了四行轨道auto auto 1fr auto可对应缩略图 / 标题 / 描述 / 按钮每个.card横跨这四行并声明grid-template-rows: subgrid让内部行直接复用父级的行轨道。这样无论内容长短所有卡片的标题行、按钮行都严格对齐——这在纯 Flexbox 或普通 Grid 中需要大量额外计算才能实现。Grid vs Flexbox选择决策表规则文档给出了一份清晰的选型清单整理如下场景推荐方案整页布局Page layoutsGrid行高需要对齐的卡片网格Card grids where row height mattersGrid任何二维对齐需求Any 2D alignment requirementGridHoly Grail 布局页头/侧边/主区/页脚Grid导航栏Navigation barsFlexbox按钮组Button groupsFlexbox单行/单列Single rows/columnsFlexbox单个元素居中Centering a single elementFlexbox两条规则在仓库中被标记为相互关联css-grid的 relatedRules 字段见 packages/content/rules/en/css/css-grid.mdx 的 frontmatter明确写道——Grid and Flexbox complement each other — Grid for page layout, Flexbox for component internalsGrid 负责页面布局Flexbox 负责组件内部。此外该规则还与responsive-unitsfr、minmax、clamp 等相对单位配合最佳、container-queries、horizontal-scroll相关联共同构成 CSS 质量审查的相邻检查项。支持情况与渐进增强规则文档的 Support Notes 给出两条务实提醒核心 CSS Grid 已获得广泛支持但 subgrid 等较新特性可能需要渐进增强progressive enhancement或为部分目标浏览器准备更简单的回退方案fallback不要只在某一个常青浏览器里验证渲染结果应在项目定义的浏览器矩阵browser matrix中逐一检查实际渲染效果。这意味着工程落地时应遵循先用核心 Grid 语法display: grid、grid-template-columns/rows、gap实现主布局subgrid、命名线等增强特性再用supports或构建工具做能力探测与回退。验证与检查如何在项目中执行这条规则规则文档给出了完整的验证流程自动化检查Automated Checks在 DevTools 中确认 computed styles 与预期修复一致例如检查display: grid、grid-template-columns的计算值是否符合设计稿若该规则涉及动效motion、对比度contrast或布局稳定性layout stability需直接验证这些对用户可见的结果。人工检查Manual Checks在规则影响到的断点breakpoints与交互状态下逐一检查渲染后的 UI上线前至少在一个移动端视口与一个桌面视口进行测试。在 skills/css-grid/SKILL.md 中这套流程被结构化成了 Agent 可直接执行的四步工作流Check在 CSS 中查找试图同时控制行与列的 float 布局或 Flexbox 布局判断它们是否更适合改用 GridFix将二维布局转换为 CSS Grid使用合适的grid-template-columns、grid-template-rows、grid-template-areasExplain向开发者解释 Grid 的基础概念tracks、cells、areas、fr 单位、minmax、auto-fill vs auto-fitCode Review审查样式表、组件样式与响应式状态在渲染后的 UI 中精确指出违反规则的 selector、declaration 或 breakpoint。仓库中的真实应用Bento Grid 与分类卡片CSS Grid 的思想在本仓库自身的 Web 应用apps/web中被大量实践以下两处是很好的参照实现首页 Bento Gridapps/web/components/homepage/features-bento.tsx容器使用grid gap-4 sm:gap-6 md:grid-cols-2 lg:grid-cols-4——移动端单列、平板两列、桌面四列正是响应式列数的实践其中两张重点卡片通过md:col-span-2 lg:row-span-2实现跨 2 列 2 行的大卡片效果对应上文显式放置一节grid-column/grid-row的跨度控制。首页分类卡片apps/web/components/homepage/category-section.tsx使用grid gap-4 sm:grid-cols-2 lg:grid-cols-3实现从 1 列到 3 列的响应式卡片网格配合gap管理间距而非 margin hack。这些组件印证了规则文档的核心论点行/列同时受控 随容器宽度自动换列正是 Grid 的典型使用场景。虽然仓库采用 Tailwind 的 grid 工具类而非手写 CSS但底层对应的正是display: grid与grid-template-columns的响应式声明与规则文档中的.card-grid示例是同一套布局哲学。如何继续深入阅读规则全文skills/css-grid/references/rule.md本文主体内容的原始出处含全部代码示例查看 Agent 技能封装skills/css-grid/SKILL.mdCheck/Fix/Explain/Code Review 四步提示词查看内容侧规则元数据packages/content/rules/en/css/css-grid.mdx优先级、难度、预计耗时、关联规则、来源与工具链接对照一维布局规则skills/flexbox-patterns/references/rule.md理解 Grid 与 Flexbox 的分工边界。一句话总结当布局需要同时控制行与列时CSS Grid 是首选——用fr与minmax()告别固定宽度用grid-template-areas把页面结构画进 CSS用 subgrid 解决嵌套对齐并始终在项目的浏览器矩阵中验证渲染结果。【免费下载链接】Front-End-Checklist The essential checklist for modern web development, for humans and AI agents项目地址: https://gitcode.com/gh_mirrors/fr/Front-End-Checklist创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考