跳到主要内容
AZ Tools

CSS Grid 演练场

可直接编辑 grid-template-columns 与 rows，或从常用预设（3 列、侧边栏、holy grail、auto-fit 卡片）中选取。用标签调整 gap、justify-items、align-items；改变预览中项目数量。预览实时反映，CSS 可直接粘贴。与 Flexbox 演练场一起覆盖 CSS 布局的两大支柱。

—

模板

点击预设可载入到列 / 行字段。

justify-items
align-items
预览
1
2
3
4
5
6
CSS
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: auto;
gap: 12px;
justify-items: stretch;
align-items: stretch;

使用方法

  1. 选择模板预设，或自定义 grid-template 值。
  2. 设置 gap 与预览的项目数。
  3. 用标签调整 justify-items / align-items。
  4. 把 CSS 复制到项目。

常见问题

fr 是什么？
剩余可用空间的一份。'repeat(3, 1fr)' 把容器分为等宽三列。可混合固定尺寸：'200px 1fr' 表示 200px 侧栏 + 弹性主区。
auto-fit 与 auto-fill 怎么选？
两者都创建尽可能多的轨道。auto-fit 折叠空轨道；auto-fill 保留。响应式卡片网格通常用 auto-fit。
为何对齐与预期不一致？
justify-items / align-items 是单元格内内容的对齐。整个网格的对齐用 justify-content / align-content（本工具暂未支持）。
能命名线或区域吗？
真实 CSS 中可以。但演练场聚焦最常见的视觉属性。named lines / grid-template-areas 很强但在通用预览中难以展示。

相关工具

CSS Flexbox 演练场

可视化选择 flex-direction、justify-content、align-items 与 gap——复制 CSS 或 Tailwind 类。

开发 0 0

CSS 滤镜演练场

可视化组合 blur、brightness、contrast、hue、sepia、invert 等 9 项——复制 CSS 滤镜或 Tailwind 任意值。

颜色 0 0

CSS 动画生成器

可视化构建 CSS 动画 — 选预设、调时间/缓动/次数、看预览、复制 keyframes。

开发 0 0

CSS clamp() 计算器（流体排版）

在两个视口宽度间平滑缩放的 `font-size: clamp(...)` 一行——直接复制。

颜色 0 0

CSS clip-path 构建器 (圆、椭圆、多边形、Inset)

CSS `clip-path` 属性可视构建器 — 选择形状 (圆、椭圆、inset、多边形)、用滑块调整数值或点击预览添加多边形顶点、复制即用 CSS 声明。内置 10 种形状预设 (三角形、六边形、星形、箭头、对话气泡、十字等)。

颜色 0 0

Cron 表达式构建器

点击式构建 cron 表达式——每小时 / 每天 / 每周 / 每月 / 完全自定义——与 Cron 解释器配套。

开发 0 0