Grid 布局构建器
Live Preview
为什么要用 CSS Grid？它与 Flexbox 有什么本质区别？
CSS Grid 是第一个专门为二维（横向 + 纵向同时控制）页面区块划分而生的布局系统，也是实现「圣杯布局」（左侧边栏 + 主内容区 + 右侧栏广告）等复杂宏观页面结构的唯一最佳选择。Flexbox 擅长的是单一方向的弹性排列，而 Grid 的超越之处在于您可以同时精确定义行和列，并让某个元素在二维平面上跨越多行多列。然而，`grid-template-columns: repeat(auto-fit, minmax(250px, 1fr))` 这类语法极其容易让初学者困惑。这款生成器将所有属性变成数字输入和增减按钮，让复杂的语法结构自动生成，降低学习门槛。
Live Grid Preview
See your grid update in real time as you adjust columns, rows, gap, and alignment settings
弹性份额 fr 单位支持
自动使用 Grid 专属的 `fr`（fraction，弹性份额）单位来定义轨道宽度，让列之间保持自动均分的弹性比例关系。
Ready CSS Output
Exports a clean .container {} CSS block with grid-template-columns, rows, gap, and align-items
四步搭建出专业的复杂页面网格框架
确定总列数和行数
根据您的页面设计稿，先决定网格划分成几列、几行。典型的主页布局通常是 3 列，仪表盘则可能是 2 至 4 列。
为每条轨道设置宽度或比例
为每一列（和行）指定尺寸，可以是固定像素 `200px`、百分比 `30%`，或弹性的 `1fr`（代表将剩余空间的 1 份分给它）。
调整行列间距
设置单元格之间的水平和垂直间距，为网格内容提供舒适的呼吸空间。
最适合使用 CSS Grid 解决的布局场景
宏观页面框架（头部、主体、侧边栏）
Grid 是实现整页宏观分区布局的最佳工具，可以同时控制 Header、Sidebar、Content 和 Footer 的位置与大小。
图片画廊与瀑布流
利用 Grid 的 `auto-fit` 和 `minmax` 属性，可以轻松实现在大屏显示多列、小屏自动折叠为单列的响应式图片瀑布流。
数据仪表盘与管理后台
仪表盘通常有大小不一的卡片模块（如图表跨 2 列展示，指标卡片占 1 列），Grid 的跨行跨列能力完美契合这一需求。
响应式多端适配布局
配合媒体查询，可以在大屏使用 3 列网格，在手机端自动切换为单列，Grid 让多端适配代码量大幅减少。
掌握 CSS Grid 的高阶技巧与避坑指南
✓ 用 auto-fit + minmax 实现自适应响应式网格
`grid-template-columns: repeat(auto-fit, minmax(250px, 1fr))` 是最强大的响应式写法：它让网格自动计算列数，每列最小 250px，多出的空间用 `1fr` 均分，无需媒体查询就能自动折叠换列。
✓ 理解 fr 单位与 minmax() 的配合
`1fr` 代表网格容器中剩余可用空间的 1 个份额。`minmax(200px, 1fr)` 意味着这列宽度最小 200px，但在空间允许时会弹性扩张填满剩余份额。
✓ 善用浏览器的 Grid 调试窗格
Chrome 和 Firefox 均内置专门的 CSS Grid 可视化调试工具（打开 DevTools 后点击元素旁的 `grid` 标识），会用网格线和区域名称直观展示当前布局的确切划分情况。
✓ 了解 subgrid 高级特性
`subgrid` 是 CSS Grid 的高级特性（近年主流浏览器已陆续支持），它允许子网格继承父级网格的轨道定义，解决了嵌套网格对齐的终极痛点。
❓ Frequently Asked Questions
What is a fr unit in CSS Grid?
fr stands for 'fractional unit'. 1fr represents one fraction of the available free space in the grid container. repeat(3, 1fr) creates 3 equal columns that share all available space equally.
How is CSS Grid different from Flexbox?
Flexbox is one-dimensional — it arranges items along a single axis (row or column). CSS Grid is two-dimensional — it controls both rows and columns simultaneously, making it far more powerful for page-level layouts.
What does minmax() do?
minmax(min, max) defines a size range for a grid track. minmax(200px, 1fr) means a column is at least 200px wide but grows up to take available space — perfect for responsive grids.
When should I use CSS Grid vs Flexbox?
Use Grid for 2D page layouts where you need both row and column control simultaneously. Use Flexbox for 1D component layouts like navbars, button groups, and form rows. Most modern layouts use both — Grid for the overall structure, Flexbox for component internals.