UD5工具箱
CSS Subgrid 布局构建器 - 对齐嵌套网格轨道
拖拽设计包含 Subgrid 的嵌套网格，直观展示子网格如何继承父网格轨道并进行独立调整，生成代码。
CSS Grid 交互演示
可视化学习网格布局 · 实时预览 · 一键复制CSS代码
基本设置
对齐设置
网格项管理
实时预览
3列 · 6项
生成的CSS代码
CSS Grid 常见问题与知识点
CSS Grid（网格布局）是CSS中用于二维布局的强大工具，可以同时控制行和列。而Flexbox主要用于一维布局（单行或单列）。Grid适合页面整体结构、卡片网格等复杂布局；Flexbox适合导航栏、列表项等线性排列。两者可以配合使用，发挥各自优势。
fr（fraction）是Grid专用的弹性单位，代表网格容器中可用空间的一份。例如
1fr 2fr 表示将可用空间分成3份，第一列占1份，第二列占2份。与百分比不同，fr会在减去gap和其他固定尺寸后自动计算剩余空间，非常灵活。使用
repeat(auto-fill, minmax(最小宽度, 1fr)) 或 repeat(auto-fit, minmax(最小宽度, 1fr)) 可以创建自动响应式的网格，无需媒体查询。例如：grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); 会在容器宽度变化时自动调整列数。justify-content 控制整个网格在容器中的水平分布（当网格总宽度小于容器时生效），如居中对齐、两端对齐等。justify-items 控制每个网格项在其单元格内的水平对齐方式（start/center/end/stretch）。简单记：content管整体，items管个体。
两者都与
repeat() 和 minmax() 配合使用。auto-fill 会保留空轨道（即使没有足够内容填充），auto-fit 会折叠空轨道并将空间分配给已有项目。实际使用中，auto-fit更常用于让内容填充整个容器宽度。使用
grid-column: span N; 让项目跨越N列，grid-row: span N; 跨越N行。也可以使用网格线编号：grid-column: 1 / 3; 表示从第1条线到第3条线（占2列）。在上方的演示工具中点击任意网格项即可调整其跨度。minmax(最小值, 最大值) 定义轨道的最小和最大尺寸。例如 minmax(200px, 1fr) 表示轨道至少200px宽，最多占1份弹性空间。常与auto-fit/auto-fill配合实现响应式布局，确保列不会太窄也不会浪费空间。布局蓝图生成器 - 线框容器配置
选择页眉、侧边栏、主体、页脚的网格布局，生成基本的布局骨架代码。
CSS @scope 规则演示 - 作用域样式隔离
演示新的 CSS @scope 规则如何限定样式作用范围，对比传统 BEM 和 CSS Modules。
GraphQL Schema 关系图浏览器 - 类型图谱展示
输入 GraphQL Schema SDL，生成交互式的关系图谱，展示类型、字段及关联。
CSS图案背景构建器 - 纯CSS重复花纹
编写或配置基础的CSS渐变、径向、锥形图案组合，生成美观的无缝重复背景代码。
网页元数据查看器 - Open Graph/Twitter Card
输入网址，抓取并展示该页面的标题、描述、OG标签和Twitter Card信息。
三分法构图覆盖 - 上传图片加九宫格参考线
为上传的照片添加可调节的三分线、斐波那契螺旋等构图辅助线。
JSON Schema 示例生成器 - 根据定义产出示例数据
提供JSON Schema定义，自动生成符合约束的示例JSON数据，用于接口文档说明。
JSON 数据表格生成器 - 自动列与样式
粘贴 JSON 数组，自动生成带搜索、排序和分页功能的数据表格组件。
几何图案生成器 - 交互式重复纹理SVG
选择基本形状（六边形、菱形等）和配色，无缝拼接生成SVG几何背景图案。
在线SVG基础编辑器 - 矢量图形可视化绘制
直接编写SVG代码并实时预览，或通过基本形状工具绘制矩形、圆形、路径，适合动态图形调试。
高级占位图生成器 - 渐变/几何/文字组合
生成漂亮几何图案或文字占位图，指定尺寸，下载用于原型。
ASCII字符画编辑器 - 网格绘制导出
在字符网格上通过工具绘制猫、超人等各种图案，导出为.txt ASCII艺术。
占位图构建器 - 指定宽高文字自动生成
输入宽高、背景色和文字，生成对应尺寸的占位图片，适用于原型设计和文档填充。
在线像素标尺 - 测量网页元素宽高
在页面移动鼠标时显示十字参考线和像素距离，方便UI开发。
像素画编辑器 - 在线网格绘图与导出
在可缩放网格上逐点绘制像素艺术，支持调色板、橡皮擦和导出PNG。
网页整页截图生成器 - html2canvas当前页面捕获
使用html2canvas截取当前网页的完整内容（需粘贴HTML或演示），生成长图并下载。
工作任务分解结构(WBS)图 - 在线绘制并导出
拖拽创建树形工作分解结构，清晰展示项目交付物与任务包，支持导出PNG/SVG，项目规划利器。
JavaScript事件循环可视化 - 任务队列动画
动画展示调用栈、宏任务和微任务的执行顺序，帮助理解JS异步机制。
书脊设计预览 - 输入文字看效果
设定书脊宽度，排版书名和出版社文字，模拟书脊在书架上的外观。
血条样式生成器 - 游戏风HP条CSS
生成用于网页游戏或展示的动态血量/进度条样式代码，支持渐变和闪烁。
结构化数据 (JSON-LD) 验证器 - Schema.org 类型检测
粘贴JSON-LD，校验其是否符合Schema.org语法并预览可能触发的丰富结果类型。
展开/收起文本截断生成器 - 行数限制CSS
设置限制行数，生成带“更多”按钮的纯CSS或轻JS截断方案。
响应式表格生成器 - 移动端堆叠表格
将HTML表格转换为移动端友好的折叠行显示模式，并生成相应CSS。
HAR 文件分析器 - 网络请求日志可视化
上传HTTP Archive格式文件，生成请求瀑布图与状态统计，深入了解网页加载细节。
HTTP 状态码互动参考表 - 含场景与原因短语
按类型筛选状态码，点击查看详细描述与常见使用场景，开发调试速查手册。
函数绘图器 - 在线绘制数学函数图像
输入 f(x) 表达式，可同时绘制多条函数曲线，支持缩放、拖拽和坐标点追踪，辅助数学学习。
占位图片生成器 - 在线生成示意图片(Canvas)
自定义尺寸、背景色、文字，纯前端生成占位图，适用于原型设计和网页排版，无需依赖外部服务。
网页截取转PDF - 输入URL生成PDF
输入网址，使用浏览器渲染并转换为可下载的PDF文件（纯前端模拟）。
SVG 图标优化器 - 精简路径数据与清理冗余
粘贴SVG代码，移除无用命名空间、注释与默认属性，减小文件体积，提升加载速度。