CSS工具/CSS网格生成器
CSS网格生成器
使用交互式可视化控件设计复杂的CSS Grid布局
CSS Grid 指南
学习如何创建复杂的二维布局
什么是 CSS Grid？
CSS Grid 是一个处理列和行的二维布局系统。它提供对元素放置和大小的精确控制，非常适合复杂的页面布局、仪表板和图片库。
如何使用此工具
- 使用模板设置定义网格列和行
- 添加网格项目并使用 grid-column/row 定位
- 调整间距、对齐和内容分布
- 尝试预设布局或创建自定义设计
专业技巧
- 使用 fr 单位实现适应可用空间的灵活轨道大小
- minmax() 函数无需媒体查询即可创建响应式列
- 命名的网格线和区域使复杂布局更易读
浏览器支持
CSS Grid 在所有现代浏览器中都受支持，包括 Chrome、Firefox、Safari 和 Edge。它具有超过 95% 的全球覆盖率，非常适合生产使用。
常见问题
fr单位是什么意思？
fr是'fraction'（分数）的缩写，代表可用空间的一部分。例如：grid-template-columns: 1fr 2fr表示第二列是第一列的两倍宽。它会自动处理间隙计算，比百分比更方便。1fr会占用减去固定大小列后的剩余空间。
如何让Grid项目跨越多行或多列？
使用grid-column和grid-row属性。例如：grid-column: 1 / 3表示从第1条列线跨越到第3条列线（占2列）。也可以使用span关键字：grid-column: span 2表示跨越2列。grid-area可以同时指定行列的起止位置。
repeat()函数怎么用？
repeat()用于简化重复模式。grid-template-columns: repeat(3, 1fr)等同于1fr 1fr 1fr。配合auto-fill或auto-fit可以创建响应式布局：repeat(auto-fill, minmax(200px, 1fr))会创建尽可能多的至少200px宽的列。
auto-fit和auto-fill有什么区别？
两者都会自动创建列数，但当项目较少时表现不同。auto-fill会创建空的列轨道保留空间。auto-fit会折叠空轨道，让现有项目拉伸填满容器。通常auto-fit更常用，因为它能让内容扩展到可用空间。
如何命名Grid线和区域？
可以在轨道定义中用方括号命名线：grid-template-columns: [sidebar-start] 200px [sidebar-end content-start] 1fr [content-end];。使用grid-template-areas可以用字符串可视化地定义区域：'header header' 'sidebar content' 'footer footer'。这让复杂布局更易理解和维护。