设计 / 布局
CSS Grid生成器（可视化Grid-Template-Areas构建器）
设置列、行和间距，拖动选择单元格以创建header、sidebar和main等命名区域，并复制包含grid-template-columns、grid-template-rows和grid-template-areas的CSS，直接粘贴即可使用。
CSS Grid生成器（可视化Grid-Template-Areas构建器）: 你输入的内容会直接写入轨道尺寸，例如200px 1fr 1fr；重复的尺寸会转换为repeat()。每个区域都会成为grid-template-areas中的一个名称，空单元格用点号表示，同时生成一条使用grid-area放置元素的规则。按照CSS要求，区域必须是矩形且不能重叠；布局会保存在此浏览器中。 完全在浏览器中本地运行，文件不会上传到服务器。
- 类别
- 开发者工具
- 使用次数
- 在浏览器中
- 费用
- 免费·无需注册
- 可用性
- 可直接使用
完全在浏览器中运行
在单元格上拖动以创建区域；区域可以跨越多行和多列。输入1fr、200px、auto或minmax(100px, 1fr)等轨道大小。
CSS
.grid {
display: grid;
grid-template-columns: 200px 1fr 1fr;
grid-template-rows: auto 1fr auto;
gap: 16px;
grid-template-areas:
"header header header"
"sidebar main main"
"footer footer footer";
}
.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main { grid-area: main; }
.footer { grid-area: footer; }为每个子元素添加其所属区域的类名。显示为点号的单元格保持为空。
命名区域
grid-template-areas中的每个字符串代表一行，每个单词代表一个单元格："header header" "sidebar main"会让页眉横跨两列。带有grid-area: main的子元素会填充所有命名为main的单元格。名称不必与类名匹配，但保持一致会让CSS更易读。
常用轨道尺寸
minmax(200px, 1fr)会让列宽至少保持200 px，同时允许其增大；auto会适应内容；repeat(auto-fill, minmax(12rem, 1fr))会生成能容纳的最大列数，适用于卡片网格。可以使用CSS clamp生成器让间距具备流动性。
使用方法
- 选择列数和行数，并输入各自的尺寸。
- 拖动选择单元格以创建区域，然后重命名区域。
- 复制CSS，并为每个子元素设置其区域的class。
隐私与限制
布局会在你的浏览器中构建。
相关工具
常见问题
fr是什么意思？
fr表示可用空间的一份：扣除固定尺寸和间距后，1fr 2fr会让第二列的宽度变成第一列的两倍。
为什么区域不能重叠或呈L形？
grid-template-areas只接受矩形，并且每个名称只能出现一次。CSS Grid可以让项目重叠，但必须使用明确的网格线编号，不能使用命名区域。
如何让布局自适应？
将生成的CSS用于宽屏布局，并在媒体查询中为窄屏重新定义grid-template-columns和grid-template-areas。
免费工具·使用在浏览器中次·无需账户