本博客日IP超过2000，PV 3000 左右，急需赞助商。
极客时间所有课程通过我的二维码购买后返现24元微信红包，请加博主新的微信号：xttblog2，之前的微信号好友位已满，备注：返现
受密码保护的文章请关注“业余草”公众号，回复关键字“0”获得密码
所有面试题(java、前端、数据库、springboot等)一网打尽，请关注文末小程序
腾讯云】1核2G5M轻量应用服务器50元首年，高性价比，助您轻松上云
css-gridish 是 ibm 推出的一个开源的网格框架。也是最近比较流行的一个前端框架。本文介绍它的一些特点和用法。
css-gridish 能制作出和Bootstrap， Carbon Design System，Material Design等一样的网格示例。并且还有很多它们所不具备的优点，能实现更多复杂的布局。
CSS Gridish提供产品网格的设计规格，并为您的团队建立多个资源以供使用：
- 草图文件与设计师的画板和网格/布局设置
- 使用CSS Grid的CSS / SCSS代码，为开发人员提供CSS Flexbox回退
- Google Chrome扩展程序，让任何人都可以检查网页的对齐方式
事实是，许多企业项目不能放弃对不支持CSS网格布局的浏览器的支持。这个工具将使用您的网格的设计规范，并构建一个精简的 CSS网格布局实现，并回退到CSS Flexbox支持。
使用教程
css-gridish 依赖 Node v8.2.0 或者更高版本。
首先，在你的项目根目录中创建一个css-gridish.json文件。
使用下面的命令进行项目构建。
npx css-gridish
如果要将网格构建添加到项目的构建过程中，请执行以下操作：
npm install css-gridish
然后，加入scripts: {build: "css-gridish"}你的package.json。
运行命令npm run build。
你的CSS和README.md类文档将被内置到./css-gridish/。
配置文件是您的所有设计系统规范的所在。编辑您的css-gridish.json所有生成的网格内容匹配您的设计系统：
{
"prefix": "gridish",
"breakpoints": {
"sm": {
"breakpoint": 20,
"columns": 4, // www.xttblog.com
"gutter": "2rem", // www.xttblog.com
"margin": "3vw" // www.xttblog.com
},
...
"max": {
"breakpoint": 100,
"columns": 12,
"gutter": "4rem",
"margin": "5vw"
}
},
"extraArtboards": {
"xlg": 100
},
"rem": 16, // www.xttblog.com
"rowHeight": 0.5,
"rows": 30,
"paths": {
"route": "css-gridish",
"intro": "intro.md"
}
}
上面只是一个简单的配置。如果你想更深入的学习，你参考官方提供的文档。https://github.com/IBM/css-gridish/tree/master/examples
最后，欢迎关注我的个人微信公众号：业余草（yyucao）！可加作者微信号：xttblog2。备注：“1”，添加博主微信拉你进微信群。备注错误不会同意好友申请。再次感谢您的关注！后续有精彩内容会第一时间发给您！原创文章投稿请发送至532009913@qq.com邮箱。商务合作也可添加作者微信进行联系！
本文原文出处：业余草： » css-gridish 教程