Skip to main content
FreeToolkit .ai

CSS 网格操场 带有交互控制的可视化 CSS 网格构建器，用于模板列、行和间距。

CSS 网格操场 illustration
🎨

CSS 网格操场

带有交互控制的可视化 CSS 网格构建器，用于模板列、行和间距。

1

定义网格结构

设置列数和行数，或输入自定义模板值。

2

调整间距和对齐

控制列和行之间的间隙，并设置justify-items和align-items。

3

复制CSS代码

预览网格布局并复制CSS代码。

Loading tool...

What Is CSS 网格操场?

CSS Grid Playground 是一个交互式的 CSS Grid 布局构建器，CSS 中最强大的布局系统。Grid 提供了对行和列的二维控制，使其非常适合复杂的页面布局。此工具提供两种模式：自动模式使用 repeat(n, 1fr) 创建简单的等宽列网格，而手动模式允许您输入自定义模板值，如 1fr 2fr 1fr 或 200px auto 200px。您可以独立控制列和行之间的间距，并设置 justify-items 和 align-items 以对齐网格单元中的内容。视觉预览显示彩色的网格项，因此您可以清晰地看到您的布局配置如何工作。此工具非常适合学习 Grid 和原型设计生产布局。

Why Use CSS 网格操场?

  • 既有自动模式又有自定义模板模式，灵活性强
  • 独立的列和行间隙控制
  • justify-items和align-items用于单元格内容对齐
  • 交互式视觉预览，带有彩色的网格项

Common Use Cases

页面布局

使用头部、侧边栏、内容和底部设计完整的页面布局。

图片库

创建具有一致间距的响应式图片网格库。

仪表盘布局

使用不同大小的网格区域构建仪表盘小部件布局。

学习CSS Grid

实验网格属性以了解二维布局。

Technical Guide

CSS Grid 通过在容器上设置 display: grid 来激活。grid-template-columns 使用长度值、fr 单位（分数）或像 repeat() 和 minmax() 这样的函数来定义列轨道。fr 单位将可用空间按比例分布。grid-template-rows 以相同的方式为行轨道工作。gap （或 row-gap 和 column-gap）设置轨道之间的间距。justify-items 和 align-items 控制内容在网格单元中如何对齐。网格项可以使用 grid-column: span n 和 grid-row: span n 跨越多个单元。grid-template-areas 中的命名网格区域提供了一种定义复杂布局的视觉方式。在 repeat() 中，auto-fit 和 auto-fill 关键字创建了无需媒体查询的响应式布局：repeat(auto-fit, minmax(250px, 1fr)) 创建尽可能多的列，并且最小宽度为 250px。

Tips & Best Practices

  • 1
    使用fr单位实现灵活、成比例的列大小
  • 2
    将minmax()与auto-fit结合，创建不需要媒体查询的响应式布局
  • 3
    使用grid-template-areas实现可读性强、命名好的布局区域
  • 4
    设置gap而不是margin以获得一致的单元格间距

Related Tools

CSS 弹性盒子实验室 - free online tool

CSS 弹性盒子实验室

具有交互控制的视觉 CSS 弹性盒子探索器，支持所有弹性容器属性。

🎨 CSS & Design
CSS 表格生成器 - free online tool

CSS 表格生成器

使用可自定义颜色、条纹和悬停效果来创建漂亮的 HTML 表格。

🎨 CSS & Design
CSS 列表生成器 - free online tool

CSS 列表生成器

创建可自定义列数、间距和样式的多列文本布局。

🎨 CSS & Design
响应式设计测试器 - free online tool

响应式设计测试器

使用内置的iframe查看器预览网站在常见设备断点下的效果。

🎨 CSS & Design

Frequently Asked Questions

Q CSS Grid中的fr是什么意思？
fr是一个分数单位，按比例分布可用空间。1fr 2fr创建两个列，其中第二个列是第一个列宽度的两倍。
Q 如何创建响应式网格？
使用repeat(auto-fit, minmax(250px, 1fr))，创建一个根据容器宽度自动调整列数的网格。
Q 网格项可以重叠吗？
是的，网格项可以占用相同的单元格，使用显式放置，创建分层设计。
Q 什么时候应该使用Grid而不是Flexbox？
对于二维布局（行和列），使用Grid；对于一维布局（单行或单列），使用Flexbox。
Q CSS Grid是否在所有浏览器中都有效？
CSS Grid在所有现代浏览器中得到支持。IE11支持较旧的Grid规范，有一些差异。

About This Tool

CSS 网格操场 is a free online tool by FreeToolkit.ai. All processing happens directly in your browser — your data never leaves your device. No registration or installation required.