▦
Grid 属性速查
CSS Grid 网格布局属性与取值速查表。
本地处理 · 不上传
加载工具中…
相关：grid · 网格 · css · 属性 · 速查
Grid 属性速查列出网格容器与项目的全部属性，含 fr 单位、repeat、minmax 与命名区域的用法。二维布局的完整工具箱。
使用步骤
- 先在容器上定义行列轨道
- 用 fr、minmax、repeat 组合出弹性布局
- 需要时给子项指定起止线或命名区域
- 隐式生成的轨道尺寸由 grid-auto-rows 控制，别漏配
使用场景
- 查找 Grid 属性的写法
- 理解 fr 与 minmax 的行为
- 编写响应式网格
- 使用命名区域布局
小贴士
- `repeat(auto-fill, minmax(200px, 1fr))` 一行就能做出响应式卡片网格，不需要任何媒体查询。
- fr 分配的是扣除间距后的剩余空间，因此配合 gap 使用永远不会溢出，这是它优于百分比的关键。
- grid-template-areas 用字符串画出布局形状，可读性极高，改版式只需改这几行字符画。
常见问题
auto-fill 和 auto-fit 有什么不同？
内容不足以填满时，auto-fill 保留空的轨道，auto-fit 会把空轨道折叠、让现有项目拉伸占满整行。想让三个卡片撑满一行就用 auto-fit。
fr 和百分比哪个好？
fr 更好。百分比基于容器总宽计算，加上 gap 后容易溢出；fr 分配的是扣除间距后的剩余空间，因此 1fr 1fr 配任意 gap 都刚好填满。
Grid 和 Flex 怎么分工？
页面整体骨架用 Grid（同时控制行列），组件内部的一行或一列元素排布用 Flex。两者是互补而非替代关系，实际项目中通常同时使用。
Grid 属性速查是免费的吗？
是。本站所有工具完全免费，无需注册登录、无广告干扰，打开即用。
使用Grid 属性速查，我的数据安全吗？
安全。该工具在你的浏览器本地完成处理，输入内容不会上传到服务器，隐私更有保障。