介绍 cssgr.id - 一个交互式 CSS 网格样板代码生成器

因此，目前，似乎你在网络上的任何地方都会看到有关 CSS 网格的文章、教程和片段。

考虑到这一点，我整理了一个简单的工具，旨在帮助各种技能水平和经验的开发人员为需要由 CSS 网格支持的布局的项目生成一些快速样板代码。

为什么？

那么我为什么要做这个呢？Cssgr.id 是出于我和我自己项目的需要而创建的。我发现自己在许多不同的项目中都尝试使用基于 CSS 网格的布局，而当这些项目开始需要更复杂的布局（需要多列和多行跨度）时，我发现仅仅生成网格的基本代码就花了相当长的时间。

我想要一种可视化的方式来创建我的布局，抓取一些标记，然后在其基础上进行构建。

那么它能做什么？（目前）

目前您可以执行以下操作：

• 选择网格项的数量
• 设置网格的列数
• 控制项目之间的网格间隙
• 设置整个网格的最大宽度
• 在网格项中切换 lorem ipsum 文本
• 设置单个网格项可以跨越的列数
• 设置单个网格项可以跨越的行数
• 获取您创建的网格的 HTML 和 CSS 代码

它会做什么？（将来……）

将来我希望添加越来越多的功能，包括但不限于：

• 使用 align-content 和 justify-content 属性设置网格项内容的对齐方式
• 允许使用 grid-auto-flow 选项
• 允许设置网格项的最小和最大宽度
• 使用 display:inline-grid 创建内联网格

我很想知道大家对这个工具的看法，以及您是否认为它现在或将来对您的项目有用？

我确信这里有很多错误，所以如果你发现任何错误请告诉我，我会尽力修复它们！

cssgr.id