可视化Grid布局设计 · 拖拽调整 · 实时预览 · 生成CSS代码
点击网格单元格分配区域 · 点击已分配的区域单元格可取消 · 支持单元格合并
grid-template-areas是CSS Grid布局的一个子属性，它允许你用命名区域（如header、sidebar、main、footer）直观地描述网页布局。与使用数字行列号不同，你只需用ASCII艺术风格的方式声明各个区域的位置，CSS会自动计算每个区域的大小和位置。这种方法特别适合搭建页面级的宏观布局，代码可读性极强。
在grid-template-areas中，合并单元格只需将同一区域名称在相邻网格中重复即可。例如，想要header占满整行宽度，只需在第一行的所有列都写上header。侧边栏占两行，就在两行第一列都写上sidebar。这就是Template Areas最方便的地方——布局看起来就像实际页面的缩略图。
fr是CSS Grid的弹性单位，表示剩余空间的一份。1fr = 剩余空间÷fr份数总和。px是固定像素单位。例如，grid-template-columns: 200px 1fr 1fr表示第一列固定200px，剩余空间由第二列和第三列平分（各占50%）。推荐使用fr实现响应式布局，用px控制固定尺寸元素（如侧边栏）。
是的。CSS Grid Layout（包括grid-template-areas）已被所有现代浏览器广泛支持：Chrome 57+、Firefox 52+、Safari 10.1+、Edge 16+。您的项目中可以放心使用。如需支持更旧的浏览器（如IE11），可能需要额外的回退方案，但本工具生成的代码默认采用标准语法。
CSS Grid适合二维布局（行和列同时控制），特别是页面级的宏观布局，如header、sidebar、main、footer的组合。Flexbox适合一维布局（单行或单列），更适合组件内部的元素排列。二者可以结合使用：用Grid搭建页面骨架，用Flexbox排列内部元素。本工具专注于Grid的Template Areas布局方式。
💡 所有处理在浏览器本地完成。生成的CSS可直接用于项目。