CSS Grid 布局速查
网格容器、轨道、区域与常见布局片段
REFERENCE · 13 ROWS
| 属性 | 作用 | 示例 |
|---|---|---|
| display: grid | 开启网格 | |
| grid-template-columns | 列轨道 | repeat(3, 1fr) |
| grid-template-rows | 行轨道 | auto 1fr auto |
| gap | 行列间距 | 16px 24px |
| grid-column | 跨列 | 1 / span 2 |
| grid-row | 跨行 | 1 / 3 |
| grid-template-areas | 命名区域 | "head head" "side main" |
| grid-area | 放入区域 | main |
| justify-items | 单元格水平对齐 | center |
| align-items | 单元格垂直对齐 | start |
| place-items | 上面两个的简写 | center |
| minmax() | 尺寸区间 | minmax(200px, 1fr) |
| auto-fit | 自动填充 | repeat(auto-fit, minmax(240px, 1fr)) |
HOW TO USE
怎么用CSS Grid 布局速查
- 打开CSS Grid 布局速查,表格已按主题整理好。
- 在右上角输入关键词可即时筛选,不用上下翻找。
- 需要写文档时点「复制为 Markdown」,直接粘到笔记里。
CSS Grid 布局速查是什么
网格容器、轨道、区域与常见布局片段。CSS Grid 布局速查按表格整理 13 条常用对照,打开即可查,无需翻文档。
它属于「参考速查」下的「速查表」分类。命令、语法、快捷键的常用速查。 同类工具还包含 HTTP 请求方法对照表、Git 常用命令速查、正则表达式语法速查 等,可以在分类页一次看全。
适用场景
- 处理与「grid」相关的任务时可以直接用。
- 处理与「网格布局」相关的任务时可以直接用。
- 处理与「grid-template」相关的任务时可以直接用。
- 处理与「fr」相关的任务时可以直接用。
表格说明
本表共 13 行 3 列,内容按常用程度排序。 表格支持关键词筛选,复制出的 Markdown 可直接用于文档、Wiki 或技术博客。
隐私说明
本工具在浏览器内运行,输入内容不会发送到服务器,也不会被记录。 关闭或刷新页面后,输入即被清空。