在线Grid布局生成器工具

一款专业的在线Grid布局生成器工具,可视化调整Grid布局的各项属性,实时预览效果并自动生成CSS代码。支持设置网格列数、行数、间距等,适用于创建复杂的响应式网格布局。

grid布局工具功能特点

如何使用grid布局工具

Grid布局的列数和行数

设置Grid布局的列数和行数,包含了常见的布局方式和说明。

Grid布局的间距和对齐方式

设置Grid布局的间距和对齐方式,对齐方式分为容器对齐和项目对齐。

网格项的配置

设置网格项的配置,包括跨列设置、跨行设置等。

复制CSS代码

对应参数的值会显示在CSS代码中,可以直接复制使用。

显示网格线

网格项数量:

列配置 (grid-template-columns)

常用值说明:

repeat(3, 1fr) - 平均分成3列
200px 1fr 200px - 两侧固定中间自适应
1fr 2fr 1fr - 中间列宽度是两侧的2倍
minmax(100px, 1fr) - 最小100px,最大自适应
repeat(auto-fit, minmax(200px, 1fr)) - 自动适应容器宽度调整列数
repeat(2, 1fr) 2fr - 2:2:4比例布局

行配置 (grid-template-rows)

常用值说明:

repeat(3, 100px) - 3行固定高度
auto 1fr auto - 头尾自适应内容,中间占满
minmax(100px, auto) - 最小高度100px,自适应内容
100px 1fr 100px - 经典布局(头尾固定,中间自适应)
auto minmax(400px, 1fr) auto - 头尾自适应,中间区域最小400px
repeat(auto-fill, minmax(120px, 1fr)) - 自动填充行数

网格间距

列间距

行间距

对齐方式

容器对齐

水平对齐(justify-content): 垂直对齐(align-content):

项目对齐

单元格内水平对齐: 单元格内垂直对齐:

网格项配置

特殊项设置 (项目1)

跨列设置:

跨行设置:

生成的CSS代码:

常见问题解答

Grid布局是什么?

Grid布局是CSS3中的一种新的布局方式,通过设置display: grid来启用。它提供了强大的对齐和分布控制能力:

Grid布局有什么用?

Grid布局可以轻松创建复杂的响应式网格布局,通过设置网格列数、行数、间距等属性,可以实现各种布局需求,如分栏、卡片布局、网格布局等。

Grid布局常见的属性有哪些?

grid-template-columns: 设置网格的列数和宽度;grid-template-rows: 设置网格的行数和高度;gap: 设置网格的列间距和行间距;justify-content: 设置网格在主轴上的对齐方式;align-content: 设置网格在交叉轴上的对齐方式;justify-items: 设置网格项目在主轴上的对齐方式;align-items: 设置网格项目在交叉轴上的对齐方式

Grid布局内置的变量有哪些?

fr: 表示网格的剩余空间;auto: 表示网格项目的大小由内容决定;minmax(min, max): 表示网格项目的最小和最大大小;repeat(count, pattern): 表示重复count次,pattern代表网格的宽度;auto-fill: 表示网格项目自动填充;auto-fit: 表示网格项目自动适应

Grid布局的网格项有哪些常用的配置?

span: 表示网格项目跨越的列数或行数(grid-column: span 2);grid-column: 表示网格项目跨越的列数或行数(grid-column: 1 / 3);grid-row: 表示网格项目跨越的行数或列数(grid-row: 1 / 3);