Can I download the output from CSS Grid Generator?

Yes, you can download or copy the generated output directly. No account or payment needed.

可以在移动设备上使用吗？

Yes, this tool works on any device with a modern browser including phones and tablets.

What is the difference between grid-template and grid-auto?

grid-template-columns/rows defines explicit tracks you specify. grid-auto-columns/rows defines the size of implicit tracks created automatically when items overflow the explicit grid.

此工具可以离线使用吗？

Yes, once the page has loaded, the tool works entirely in your browser without needing an internet connection. All processing is done locally with JavaScript.

CSS Grid 生成器，免费

可视化构建 CSS Grid 布局 · 设置栏、行、间距与对齐方式，实时预览并复制 CSS。

Grid 属性

列

行

列单位

行单位

间距（px）

Justify Items

Align Items

预览

生成的 CSS

使用方法

设置 Grid 尺寸：输入布局所需的列数和行数。
定义轨道：用 fr、像素、百分比、auto 或 minmax() 单位设置每列宽度和每行高度。
复制 CSS：生成的 display: grid、grid-template-columns、grid-template-rows 和 gap 属性可直接粘贴到您的样式表。

为什么使用 CSS Grid 生成器？

CSS Grid 是 CSS 中最强大的布局系统，能创建以前需要表格、浮动或 JavaScript 才能实现的复杂二维布局。但掌握 grid-template-columns、fr 单位、minmax()、repeat() 和命名区域需要练习。这款可视化生成器让您通过点击和拖拽构建任意 Grid 布局，并产出可直接使用的干净 CSS，或用作深入理解 Grid 的学习范例。

功能特性

可视化 Grid 构建器：点击即可直观地定义列和行轨道。
支持 fr 单位：使用灵活的 fr 单位实现按比例的响应式列。
minmax() 快捷方式：通过最小和最大尺寸约束轻松创建响应式列。
间距控制：可分别设置 column-gap 和 row-gap。
命名区域：通过可视化的区域绘制界面定义 grid-template-areas。

常见问题

CSS Grid 中的「fr」单位是什么？

fr（fraction）单位按比例分配可用空间。在 3 列的 1fr 2fr 1fr 布局中，中间一列获得的空间是两侧的两倍。fr 单位会在固定尺寸轨道分配完之后再平分剩余空间。

不使用媒体查询如何创建响应式 Grid？

将 grid-template-columns 设为 repeat(auto-fill, minmax(200px, 1fr))。这会在满足最小宽度前提下尽可能多地创建列，并拉伸填满可用空间。当容器宽度变化时，项目会自动重新排列。

grid-template 与 grid-auto 有什么区别？

grid-template-columns/rows 定义您显式指定的轨道。grid-auto-columns/rows 定义隐式轨道的尺寸，即当项目溢出显式网格时自动创建的额外列和行。

CSS Grid 简史

在 CSS Grid 出现之前，Web 布局经历了三个痛苦的时代。基于表格的布局（1995-2008）滥用 <table> 元素来实现视觉结构，将 Photoshop 草图「切片」为 HTML 网格。基于浮动的布局（2008-2013）用 float 属性替代了表格，需要借助类似 Nicolas Gallagher 的 micro-clearfix（2011）这样的「clearfix」技巧来包含换行的子元素。Flexbox（CSS Flexible Box Layout Module Level 1，W3C 推荐标准 2018）解决了一维布局，但在真正的二维网格上表现吃力。CSS Grid 的故事始于微软在 Internet Explorer 10（2012）中的 -ms-grid 实现，这是一个为 W3C 规范提供参考的早期版本。CSS Grid Layout Module Level 1 的第一份 W3C 公开工作草案于 2011 年 4 月发布，但真正的势头来自 Rachel Andrew（她的著作《Get Ready for CSS Grid Layout》，2016）和 Jen Simmons（Mozilla 开发者倡导者，2016-2018 年的会议巡回）的推广工作。浏览器竞赛在 2017 年 3 月的一个引人注目的两个月窗口期内尘埃落定：Chrome 57、Firefox 52、Safari 10.1 和 Edge 16 都在几周内交付了无前缀的 Grid。W3C 在 2016 年 12 月将 Grid Level 1 标记为候选推荐标准；最终的 W3C 推荐标准于 2020 年 8 月到来。Subgrid（Level 2）在 Firefox 71（2019 年 12 月）、Safari 16（2022 年 9 月）和 Chrome 117（2023 年 9 月）中推出。下一个前沿是提议的 Masonry 布局（CSS Working Group 2020 提案，Firefox 自 2021 年起在标志后开启）。

CSS Grid 的解剖结构

网格容器。display: grid（或 display: inline-grid）将任何元素转换为网格上下文。该元素的直接子元素成为「网格项」并参与网格布局。孙元素不受影响，除非它们也设置 display: grid。
grid-template-columns 和 grid-template-rows。定义显式轨道（列和行）。值可以是固定的（px、em、rem）、弹性的（fr，CSS Grid 规范中定义的「分数」单位）、内容尺寸的（auto、min-content、max-content），或任意组合。grid-template-columns: 200px 1fr 1fr 创建一个 200px 的侧边栏加上两个相等的弹性列。
fr 单位。分数单位在固定尺寸的轨道分配完毕后分配剩余空间。1fr 2fr 1fr 让中间列获得侧边列两倍的剩余空间。fr 是 Grid 独有的（Flexbox 中相关的 flex-basis: 0 1 fr 等价物并不相同）。它解决了「百分比列」模式数十年来艰难应对的问题：剩余空间的整洁分配。
repeat() 和 minmax()。repeat(3, 1fr) 紧凑地定义三个相等的列。minmax(200px, 1fr) 将轨道限制在一个范围内。杀手级组合 grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)) 产生一个响应式网格，无需媒体查询即可自动调整列数以适应容器。这一行代码取代了生产 CSS 中数千个断点定义。
grid-template-areas。一种视觉排列的字符串语法，用于命名网格的区域。子元素通过 grid-area: header 加入命名区域。结果是布局即 ASCII 艺术：任何阅读 CSS 的人都能从源代码可视化网格。对于打败了 CSS 设计师十年之久的「圣杯」布局（页眉 / 侧边栏 / 主体 / 旁注 / 页脚）特别强大。
gap（以及 column-gap、row-gap）。定义轨道之间的间距。gap: 16px 在所有行和列之间均匀地间隔。在 Grid 之前，这需要脆弱的 padding+margin 模式或精心计算的负 margin。同样的 gap 属性后来被添加到 Flexbox（自 2022 年起普遍支持），现在被认为是现代 CSS 中处理项目间间距的规范方式。

现实世界中的 Grid 模式

图片画廊。repeat(auto-fill, minmax(200px, 1fr)) 模式是作品集网站（Behance 网格）、照片画廊（Unsplash 风格）和产品集合的主导 CSS。在 Grid 之前，无需媒体查询自动适应列数实际上是不可能的。
仪表板和管理面板。Grafana、Datadog、Stripe Dashboard 以及大多数现代管理 UI 使用命名网格区域来定位卡片、侧边栏和内容区域。拖放式仪表板构建器（DataDog、Looker、Tableau）将用户操作转换为 grid-template-areas 字符串的变更。
杂志风格布局。编辑型网站（The Guardian、NYT、Vox）使用 Grid 实现不对称布局，包括重叠元素、跨多列的大型主图，以及突破主文本列的引文。Grid 的 z 轴（带显式区域的 z-index）自然地处理分层。
产品卡片网格。Shopify、Amazon、Etsy 店面。这种模式如此普遍，以至于 Tailwind CSS、Bootstrap 和 Bulma 都将基于 Grid 的卡片组件作为其核心工具集的一部分。卡片宽高比现在通常使用 aspect-ratio 属性锁定（Safari 15、Chrome 88，2021）。
「圣杯」布局。页眉 / 左侧边栏 / 主内容 / 右侧边栏 / 页脚。这种 5 区域布局是 CSS 15 年来未解决的问题。使用 grid-template-areas 和 8 行 CSS，它在 2017 年变得轻而易举。这种模式主导了文档站点（Stripe Docs、MDN、Vercel Docs）。
表单布局。左侧带标签、右侧带输入的两列表单布局，城市/州/邮编位于一行的地址表单，多步骤向导。Grid 让标签和输入即使在内容宽度变化时也能在各行之间整齐对齐。这种模式用更整洁的 CSS 取代了早期基于标签宽度技巧的方法。
模态框和对话框定位。在全视口覆盖层上使用 display: grid; place-items: center; 可以用一行代码完美地水平和垂直居中对话框，取代了数十年使用的 position: absolute; top: 50%; transform: translateY(-50%); 模式。place-items 是 2024 年居中任意内容的规范方式。
无需媒体查询的响应式。将 repeat(auto-fill, minmax(...)) 与 gap 结合产生无需任何媒体查询即可适应容器宽度的布局。这是现代响应式设计的基石：响应容器大小而非视口大小的布局，预示了 Container Queries（现在也已发布，2023）。

标准与里程碑

IE10 -ms-grid（2012）。微软发布了第一个类 Grid 实现，由微软的 Phil Cupp 设计。语法与最终的 W3C 规范不同，但证明了概念并影响了后来的设计决策。
CSS Grid Layout Module Level 1，W3C 工作草案（2011 年 4 月）。第一份 W3C 公开草案。随后经历了多次迭代；语法在 2011 年至 2017 年最终实现之间发生了重大变化。
Rachel Andrew 和 Jen Simmons 的推广（2014-2017）。Andrew 的书《Get Ready for CSS Grid Layout》（Smashing Magazine，2016）和 Simmons 作为 Mozilla 开发者倡导者的会议演讲建立了使浏览器发布可行的社区知识基础。两人都在规范的 W3C 编辑注释中获得了致谢。
浏览器竞赛，2017 年 3 月。在一个引人注目的两个月窗口期内，Chrome 57（3 月 9 日）、Firefox 52（3 月 7 日）、Safari 10.1（3 月 27 日）和 Edge 16（2017 年 10 月）全部交付了无前缀的 Grid。对于这种复杂程度的特性，如此水平的同步跨浏览器交付几乎前所未有。
候选推荐标准（2016 年 12 月）。CSS Grid Level 1 被提升为 W3C 候选推荐标准，这是 W3C 推荐标准之前的最后阶段。CR 阶段通常需要数年；Grid 在这一阶段比大多数 CSS 特性移动得更快。
W3C 推荐标准（2020 年 8 月）。Grid Level 1 作为 W3C 推荐标准最终确定。这在技术上是规范的「发布」日期，但所有主要浏览器在三年前就已发布了可用的实现。
Subgrid（Level 2，2019-2023）。Subgrid 让网格项继承其父级的轨道定义，解决了「嵌套网格对齐」问题。Firefox 71（2019 年 12 月）、Safari 16（2022 年 9 月）、Chrome 117（2023 年 9 月）。Chrome 缓慢的推出反映了实现的复杂性。
Masonry 布局（提议，2020-）。CSS Working Group 自 2020 年以来一直在讨论语法。Firefox 在 2021 年于标志后发布。将项目打包到列中的 Pinterest 风格流动布局是目标使用案例。Chrome 团队（Apple 主导）和 Mozilla 团队提出了竞争的语法；截至 2024 年，解决方案仍在等待中。