CSS Grid with the guesswork removed: the playground is a real grid container, the track editors write grid-template-columns/rows, and dragging across cells places a spanning item — the generated CSS is read straight off what you built.
Track values accept anything CSS does (200px, 1fr, minmax(180px, 1fr), auto…); clicking an item removes it; the output uses the span notation so it survives track edits.
Frequently asked questions
Why span notation instead of line numbers on both ends?
grid-column: 2 / span 2 keeps working when you add or reorder tracks; a hard end line (2 / 4) silently breaks. Start line + span is the resilient spelling.
Can I use named areas?
This generator sticks to tracks + spans, which covers the same ground with less machinery. If you want template-areas, the emitted tracks are the hard part — the names are yours to add.
中文说明
把 CSS Grid 的猜测环节去掉：画布就是一个真实网格容器，轨道编辑器直接写 grid-template-columns/rows，拖拽跨格即放置跨行跨列的元素——生成的 CSS 从你搭好的布局上原样读出。
轨道值接受 CSS 的一切（200px、1fr、minmax(180px, 1fr)、auto……）；点击元素删除；输出用 span 记法，改轨道后依然成立。
常见问题
为什么用 span 记法而不是两端行号？
grid-column: 2 / span 2 在增删、重排轨道后依然成立；写死终点行号（2 / 4）会悄悄失效。起点 + 跨度是更稳的写法。
支持命名区域吗？
本生成器只用轨道 + 跨度，同样的事更少机关。想要 template-areas，输出的轨道定义就是最难的部分——命名交给你补。