Developer Tools
Design Tools
Web UtilitiesCSS Grid 练习场
通过实时预览、模板区域支持和即时 CSS 代码输出，以可视化方式构建 CSS 网格布局。交互式配置列、行、间距和元素位置。
预设
容器属性
项目属性
实时预览
容器 CSS
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 80px);
gap: 8px;
}项目 CSS
.grid-item-1 {
}
.grid-item-2 {
}
.grid-item-3 {
}
.grid-item-4 {
}
.grid-item-5 {
}相关工具
关于 CSS Grid 练习场
工作原理
- 配置容器属性：grid-template-columns、grid-template-rows、gap、justify-items、align-items、justify-content 和 align-content
- 添加最多 8 个网格项目，并使用 grid-column-start/end 和 grid-row-start/end 定位每个项目
- 在模板字段中使用 span 表示法（例如 span 2）或明确的行号
- 实时预览布局——单击预览中的任意项目在编辑器中选择它
- 应用常见布局的预设（如圣杯、仪表板或卡片网格），然后进一步自定义
- 将容器和项目的生成 CSS 直接复制到您的项目中
常见使用场景
- 通过即时视觉反馈交互式学习 CSS Grid 属性
- 原型设计页面布局：页眉、侧边栏、仪表板、卡片网格
- 通过可视化调整行号调试网格放置问题
- 为常见布局模式生成样板网格 CSS
- 向学生和同事教授 CSS Grid
常见问题
什么是 CSS Grid 练习场？
CSS Grid 练习场是一个交互式浏览器工具，可让您以可视化方式配置所有 CSS Grid 容器和项目属性。更改会立即在实时预览中显示，并且会自动生成可直接使用的 CSS 代码供您复制到项目中。
可以配置哪些容器属性？
您可以配置 grid-template-columns、grid-template-rows、gap（或单独的 column-gap 和 row-gap）、justify-items、align-items、justify-content 和 align-content。所有值均支持任何有效的 CSS 语法，包括 fr 单位、repeat()、minmax() 和 auto。
如何将网格项目放置在特定行上？
使用项目属性面板中的编号标签选择项目，然后设置 grid-column-start、grid-column-end、grid-row-start 和 grid-row-end。输入数字作为明确的网格线，或将其保留为 'auto' 以自动放置。
什么是预设，如何使用？
预设是常见布局的预构建网格配置：'圣杯' 创建经典的页眉/导航/主体/侧边/页脚布局，'侧边栏+主体' 构建两列侧边栏布局，'3列瀑布流' 演示跨越项目，'仪表板' 展示四列指标仪表板，'博客布局' 设置带侧边栏的典型文章，'卡片网格' 创建均匀的三列卡片布局。
grid-template-columns 可以接受哪些值？
grid-template-columns 接受任何有效的 CSS 轨道列表：固定长度如 '200px 1fr'，repeat() 函数如 'repeat(3, 1fr)'，minmax() 如 'repeat(3, minmax(100px, 1fr))'，auto-fill 或 auto-fit，或命名线如 '[开始] 1fr [结束]'。
fr 单位和像素有什么区别？
fr（分数）单位表示网格容器中可用空间的一部分。'1fr 1fr 1fr' 将空间均等分为三列。'2fr 1fr' 给第一列两倍的空间。像素值是固定的，与容器大小无关。结合使用（如 '200px 1fr'）可以创建固定侧边栏和灵活主区域。
justify-items 和 justify-content 有什么区别？
justify-items 控制项目在其网格单元格内沿内联轴的对齐方式。justify-content 控制整个网格在容器内有额外空间时的对齐方式。类似地，align-items 在块轴上对齐单元格内的项目，而 align-content 垂直对齐整个网格。
网格项目的 justify-self 和 align-self 是什么？
justify-self 覆盖单个网格项目的 justify-items，控制其在单元格内的内联对齐。align-self 覆盖单个项目的 align-items，控制其在单元格内的块对齐。两者均接受：auto、start、end、center 和 stretch。
如何使项目跨越多列或多行？
设置 grid-column-start 和 grid-column-end（或 grid-row-start 和 grid-row-end）以创建跨越。例如，要从第 1 列跨到第 3 列，设置 start=1 和 end=3。或者，将 start 保留为 'auto'，将 end 设置为 'span 2' 以从自动放置位置跨越两个轨道。
可以添加多少个网格项目？
您最多可以添加 8 个网格项目。单击 '+ 添加项目' 按钮添加更多项目。每个项目都有颜色编码，便于在设置面板和实时预览中识别。
可以为列和行使用自定义间距吗？
可以。默认情况下，单个 gap 值同时应用于列和行。勾选 '使用自定义列/行间距' 选项，通过独立滑块分别设置 column-gap 和 row-gap，允许不同的水平和垂直间距。
如何复制生成的 CSS？
有两个复制按钮：一个用于容器 CSS 块（.grid-container），一个用于包含容器和项目规则的所有 CSS。单击任一 '复制 CSS' 按钮将代码复制到剪贴板并粘贴到您的项目中。