CSS Grid 生成器

可视化 CSS Grid 布局构建器。交互式创建网格布局并获取可用的 CSS 代码。

快速预设:

列数 (3)

行数 (2)

列间距: 16px行间距: 16px

水平对齐项垂直对齐项

网格预览

生成的 CSS

.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: auto auto;
  gap: 16px;
}

.grid-item {
  padding: 16px;
  background: #e2e8f0;
  border-radius: 8px;
}

生成的 HTML

<div class="grid-container">
  <div class="grid-item">1</div>
  <div class="grid-item">2</div>
  <div class="grid-item">3</div>
  <div class="grid-item">4</div>
  <div class="grid-item">5</div>
  <div class="grid-item">6</div>
</div>

免费 CSS Grid 生成器

使用此交互式生成器可视化构建 CSS Grid 布局。实时调整列、行、间距和对齐属性，即时获取生产就绪的 CSS 和 HTML 代码。

CSS Grid 属性参考

属性	描述	示例
grid-template-columns	定义列轨道大小	1fr 1fr 1fr
grid-template-rows	定义行轨道大小	auto 1fr auto
gap	设置行列间距	16px 16px
justify-items	水平对齐单元格内项目	start \| center \| end \| stretch
align-items	垂直对齐单元格内项目	start \| center \| end \| stretch

常见问题

什么是 CSS Grid？

CSS Grid 是一个二维布局系统，可以使用行和列创建复杂布局。

CSS Grid 和 Flexbox 有什么区别？

CSS Grid 是二维的（行和列），Flexbox 是一维的（行或列）。

"fr" 单位是什么意思？

"fr" 代表网格容器中可用空间的一个分数。

CSS Grid 支持所有浏览器吗？

是的，CSS Grid 在所有现代浏览器中都受支持，全球浏览器支持率超过 97%。

可以同时使用 Grid 和 Flexbox 吗？

当然可以。常见的模式是用 Grid 做页面布局，Flexbox 做组件布局。

保持更新

获取每周开发技巧和新工具通知。

无垃圾邮件，随时退订。

Enjoy these free tools?

☕Buy Me a Coffee

CSS Grid 生成器

免费 CSS Grid 生成器

CSS Grid 属性参考

常见问题

相关工具

更多工具

Recommended

保持更新