CSS 网格布局生成
CSS Grid Builder
用命名区域可视化地排出网格，并导出 grid-template 的 CSS。
点击单元格把命名区域涂到网格上，按规范的矩形规则检查它们，并输出 `grid-template-areas`——或者你更喜欢的话，线编号。这个检查很要紧，因为无效的区域列表会被悄悄丢掉，任何地方都没有报错。
网格
尺寸格里可以写 1fr·240px·auto·minmax(200px, 1fr)。
点一个格子，它就归到下面那个区域名下。先点一个再点另一个，两者之间的矩形会填成同一个区域。再点一次同名的格子就把它清空。
CSS
预览
只有一条规则要记住
起了名字的区域必须是矩形（CSS Grid Level 2 §7.3.1）。摆成 L 形，整条 grid-template-areas 都会作废，而且一点错误提示都没有，所以这个工具在写出 CSS 之前先告诉你。连着三条或更多一样的轨道，会写成 repeat()。
只排一行的话， Flexbox 弹性布局实验场更简单。
怎么用
从一个布局开始
页眉-侧栏-主体-页脚、一排卡片、一个仪表盘、一篇居中的文章。或者从一个空网格自己搭。
给区域命名并点击单元格
输入名字，然后点击。先点一个单元格再点另一个，填满它们之间的矩形；再点一次同名的单元格就清除它。
设置轨道尺寸
顶部和左侧的框接受 `1fr`、`240px`、`auto` 或 `minmax(200px, 1fr)`。三个或更多相同的轨道用 `repeat()` 写出。
常见问题
为什么我的 L 形区域不起作用？
因为命名区域必须是矩形——CSS Grid Level 2 §7.3.1。不是矩形时，整条 `grid-template-areas` 声明无效，浏览器把它丢掉，不报任何错。这个工具在写出 CSS 之前就告诉你，这是你能得到的唯一警告。
命名区域还是线编号？
区域更易读，插入一条轨道也不会坏。当一个项目跨越的轨道不是在每个断点都存在时，或者网格是生成的时候，线编号是唯一的选择。开关两种都能写。
怎么让一个单元格留空？
不给它名字。它在模板里写成 `.`，这是规范的空单元格记号——每个空单元格一个点，而一串点仍然必须让每个命名区域保持矩形。
为什么 `fr` 不会收缩到比内容更窄？
因为 `1fr` 的意思是 `minmax(auto, 1fr)`，而那个 `auto` 最小值就是内容尺寸。想要一个真的能比里面的东西更窄的轨道，用 `minmax(0, 1fr)`——这是网格子元素拒绝收缩的经典修法。
可以从这些接进来
接下来
这些工具吃得下当前工具的产出，结果可以直接送过去。
流式尺寸 clamp 计算
Fluid Size Calculator
算出一条 clamp() 表达式，让尺寸在两个视口宽度之间平滑变化。
CSS 美化与压缩
CSS Beautifier & Minifier
格式化或压缩 CSS，不重排任何声明，原本的记号序列一个不动。
Flexbox 弹性布局实验场
Flexbox Playground
在实时示例上逐个切换 flex 属性，同时看到 CSS 和每个属性改变了什么。
颜色格式转换
Colour Format Converter
在 HEX、RGB、HSL、HWB、LAB、LCH 和 OKLCH 之间换算同一个颜色，并给出最接近的已知色名。
颜色拾取器
Colour Picker
在 OKLCH 色板上选色，也可以用屏幕吸管或从上传的图片里取色，并按任意表示法复制出来。
对比度检测
Contrast Checker
按 WCAG 2 和 APCA 给前景色和背景色这一对打分，并推荐最接近的能通过的颜色。