在线Grid布局生成器

Grid布局生成器详情

Grid布局生成器使用说明

这是一款专业的在线Grid布局生成器,支持可视化调整网格属性并实时预览效果。通过简单的界面操作即可生成所需的CSS Grid代码。

可视化调整Grid布局属性
实时预览网格布局效果
自动生成CSS代码
支持自定义网格列数和行数

Grid布局基础知识

Grid布局是CSS中最强大的布局系统,通过设置display: grid来启用。它提供了二维布局能力:

grid-template-columns: 定义列的数量和宽度
grid-template-rows: 定义行的数量和高度
grid-gap: 设置网格间距
justify-contents: 控制网格项在列方向的对齐方式
align-contents: 控制网格项在行方向的对齐方式
justify-items: 控制网格内容项在网格中的列方向的对齐方式
align-items: 控制网格内容项在网格中的行方向的对齐方式

Gird布局常见函数和变量

Grid布局中常用的函数包括repeat()、minmax()、auto-fit、auto-fill等。这些函数可以帮助我们更灵活地定义网格的列和行。

fr: 表示网格的可用空间
auto: 表示自适应
min-content: 表示内容的最小宽度
max-content: 表示内容的最大宽度
repeat(): 重复定义列或行
minmax(): 定义列或行的最小和最大宽度
auto-fit: 自动调整列或行数量以适应容器
auto-fill: 自动调整列或行数量以填充容器

常用值说明:

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比例布局

常用值说明:

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代码: