CSS Grid 试验场
可视化组合 CSS Grid 模板、间距和定位，然后复制布局 CSS。
预览
点击网格中带编号的项目即可选中并重新定位。
grid-template-columns
—
grid-template-rows
—
生成的 CSS
—
—
列
行
间距
对齐
16px
16px
网格项目
项目 1
暂无项目。添加一个项目以将其放置到网格上。
预设关于 CSS Grid 试验场
CSS Grid 网格实验场可以直观地搭建真实的网格布局。添加或移除列轨道和行轨道来定义 grid-template-columns 和 grid-template-rows，设置列间距与行间距，并调整全部四个对齐属性——justify-items、align-items、justify-content 和 align-content——预览会实时反映每一次改动。
元素放置是网格真正强大之处：添加元素，在预览中点击选中其中一个，然后通过列起点、列跨度、行起点和行跨度来定位它。侧边栏、页头以及跨越多个轨道的特色区块，正是几乎所有真实网格布局背后的技巧。
三种预设——万能布局（holy grail）、仪表盘和图库——加载了经典的页面结构，供你拆解和改造。布局满意后，复制生成的 CSS，其中包含完整的网格容器规则和每个元素的定位设置。
如何使用 CSS Grid 试验场
- 添加或移除列轨道和行轨道，定义网格模板。
- 设置列间距和行间距。
- 调整对齐控件：justify-items、align-items、justify-content 和 align-content。
- 添加元素，在预览中点击其中一个，设置其列/行起点和跨度以完成定位。
- 加载万能布局、仪表盘或图库预设，研究经典布局结构。
- 将生成的 CSS 复制到你的样式表中。
常见问题
justify-items 用于对齐每个元素在自己网格单元格内的位置；当轨道未填满容器时，justify-content 用于对齐整个网格在容器内的位置。纵向上 align-items 与 align-content 的区别同理。
选中该元素并增加其列跨度——生成的 CSS 会用带 span 值的 grid-column 表示。结合行跨度，你可以在同一个网格中构建页头栏、侧边栏和大型特色区块。
这是经典的页面骨架：顶部和底部为通栏的页头与页脚，中间是三列——导航、主内容和侧栏。过去用浮动实现它极为繁琐；该预设展示了几行网格定位就能干净利落地解决这个问题。
Grid 擅长处理需要行列同时对齐的二维布局——页面骨架、仪表盘、图库。Flexbox 更适合工具栏、菜单这类一维排列。二者可以很好地结合：页面整体用 Grid，组件内部用 Flex。
是的，完全免费且基于浏览器运行——尽情实验，你构建的任何内容都不会离开你的设备。
热门搜索
css grid 生成器
css grid 试验场
grid-template-columns 生成器
css grid 布局生成器
grid-template-areas 构建器
css grid 间距工具
css grid 可视化工具
需要帮助？
使用此工具时遇到问题？请告诉我们的团队。