已更新9月 2026
如何使用CSS 网格生成器
- 设置列和行 - 计数和大小（fr 表示灵活，px 表示固定）。
- 调整间隙 - 网格所有轨道之间的内置间距。
- 预览结构 - 项目按源顺序填充单元格。
- 复制容器 CSS - 并为每个项目添加跨度规则拉伸。
CSS 网格生成器是什么？
CSS 网格生成器直观地构建二维布局：选择列数和行数、调整它们的大小（fr 单位、固定像素或混合）、设置间隙、预览结果并复制 display: grid; grid-template-columns: ... CSS。
网格是 CSS 的布局系统，用于在两个维度（页面支架、仪表板、图像库、表单布局）上对齐。它的语法紧凑但抽象（grid-template-columns: 250px 1fr 1fr 描述了五个标记中的侧边栏加两列）；在将抽象提交到样式表之前，生成器使抽象可见。
关于CSS 网格生成器
设置列和行，调整轨道大小，调整间隙，并复制为容器生成的 CSS。
快速流畅地调整轨道大小：1fr 1fr 1fr 是三个相等的灵活列； 250px 1fr 是经典的固定侧边栏流体内容 shell； repeat(3, 1fr) 缩写相等的轨道；皇冠上的宝石 repeat(auto-fit, minmax(250px, 1fr)) 创建了一个响应式卡片网格 - 尽可能多的 ≥250px 列，没有媒体查询 - 现有复制最多的网格配方。
它加速的模式库：照片库（自动适应网格）、仪表板面板（显式区域）、具有对齐标签/字段列的表单以及圣杯页面外壳（标题）跨越所有列、侧边栏、主栏、页脚），布局系统追逐了二十年，网格以六行调度。项目自动按源顺序排列；跨越（覆盖多个轨道的项目）为每个项目添加 grid-column: span 2。
常见问题解答
自由空间的一部分：1fr 2fr 在放置固定轨道后将剩余宽度分割为三分之一/三分之二。它是网格的原生灵活单位——比起忽略间隙的百分比更喜欢它。
响应式网格单行：在容器允许的情况下容纳至少 250 像素的尽可能多的列，均匀拉伸它们，调整大小时重排 — 无需单个媒体查询的卡片布局。
在项目上：grid-column：span 2（或显式行：grid-column：1 / 3）。行与网格行的工作方式相同。跨越是容器模板顶部的每个项目的 CSS。
网格：卡片必须严格排列在行和列中（高度相等，网格干净）；当卡片可以独立调整大小时，带有包裹的弹性盒。自动调整配方使网格成为画廊的默认答案。
显示：网格；网格模板列：250px 1fr；间隙：24px——固定侧边栏，流体主栏。为整页 shell 添加 grid-template-rows 和跨越两列的标题 (grid-column: 1 / -1)。