filter wiz
Today, I am thrilled to share with you a new, flexible grid framework generator: Grid Wiz!
今天，我很高兴与您分享一个新的，灵活的网格框架生成器：Grid Wiz！
Grid frameworks are essential for experiences that span many codebases to keep the layouts aligned. The grid keeps columns at specific dimensions as the user goes to different pages within the experience.
网格框架对于跨越许多代码库的体验至关重要，以使布局保持一致。 当用户转到体验中的不同页面时，网格将列保持在特定的尺寸。
While at IBM, I introduced CSS Gridish. It had a simple premise: Give a config file of your grid design and get both CSS Flexbox and CSS Grid back. This helps teams transition to CSS Grid once their users’ browsers support the final spec.
在IBM期间，我介绍了CSS Gridish 。 它的前提很简单：为您的网格设计提供一个配置文件，并同时获取CSS Flexbox和CSS Grid。 一旦用户的浏览器支持最终规范，这将有助于团队过渡到CSS Grid。
There were two fundamental decisions in CSS Gridish that troubled me: the use ofvwunits and Node Sass.vwunits created more bugs and poor development experiences than it solved. Node Sass is powerful and used by a lot of IBM, but restricted the environment flexibility of the package.
CSS Gridish中有两个基本的决定使我感到困扰：vw单元和Node Sass的使用。vw部门创造的错误和开发经验不尽如人意。 Node Sass功能强大，被许多IBM使用，但限制了程序包的环境灵活性。
So for my next personal project, I set off to work on Grid Wiz. Let’s check out why I am much more excited about this project…
因此，对于我的下一个个人项目，我着手开发Grid Wiz。 让我们看看为什么我对这个项目更加兴奋……
好处 (Benefits)
灵活的浏览器支持 (Flexible Browser Support)
Different experiences have different browser requirements based on the users visiting. Your grid framework should also be performant with the smallest amount of code needed. With specific browser compatibility, you can support the right browsers with minimal code.
根据访问的用户，不同的体验对浏览器的要求也不同。 您的网格框架还应该以最少的代码量来实现高性能。 通过特定的浏览器兼容性，您可以使用最少的代码来支持正确的浏览器。
Need to support browsers all the way back to Internet Explorer? Use the Flexbox mode with the most code. No need for Internet Explorer, but do need to cover some slightly older versions of today’s browsers? The CSS Variables mode will save you a lot of code with the exact same visual output. When a user base is finally ready for CSS Grid, you will get the extra functionality with the least amount code.
是否需要一直支持浏览器回到Internet Explorer？ 以最多的代码使用Flexbox模式。 不需要Internet Explorer，但是否需要涵盖当今浏览器的某些较旧版本？ CSS变量模式将以完全相同的视觉输出为您节省大量代码。 当用户群终于准备好使用CSS Grid时，您将以最少的代码获得额外的功能。
Here is a breakdown of the support modes you can toggle between:
以下是您可以在以下两种支持模式之间切换的细分：
嵌套网格(Nesting Grids)
HTML isn’t written one layer deep. A great grid framework should allow you to embed divs within divs, but still remember how many columns are available.
HTML并不是写得很深。 出色的网格框架应允许您将div嵌入div中，但仍要记住有多少列可用。
Without “subgrids”, users of your grid framework are prone to accidentally break out of your design spec.
如果没有“子网格”，则网格框架的用户很容易意外违反您的设计规范。
The next update to CSS Grid will include subgrids natively. However, Grid Wiz allows you to start using subgrids today. Once browsers update to the future feature of CSS Grid, a new support mode will be added for performance.
CSS Grid的下一次更新将原生包含子网格。 但是，Grid Wiz允许您立即开始使用子网格。 浏览器更新到CSS Grid的未来功能后，将添加新的支持模式以提高性能。
环境灵活性 (Environment Flexibility)
Writing the source code in isomorphic JavaScript creates many possible use cases for Grid Wiz. Here are some of the ways you can use Grid Wiz:
用同构JavaScript编写源代码会为Grid Wiz创建许多可能的用例。 以下是使用Grid Wiz的一些方法：
Edit your grid directly in the live demo and then copy the CSS directly into your codebase.This is a great method for those still new to web development.
直接在实时演示中编辑网格，然后将CSS直接复制到代码库中。对于那些尚不熟悉Web开发的人来说，这是一个很棒的方法。
Distribute your grid to multiple projects with a Node package.Add Grid Wiz as a dependency and compile it with Gulp, Webpack, Rollup, or anything else.
使用Node包将网格分布到多个项目。将Grid Wiz添加为依赖项 ，并使用Gulp，Webpack，汇总或其他任何方式对其进行编译。
Compile the grid directly in your app’s build process.This may sound irresponsible, but does not really affect server-side rendered apps like the Grid Wiz website itself. (Shoutout to Next.js for making SSR easy.)
直接在应用程序的构建过程中编译网格。这听起来可能是不负责任的，但是并没有真正影响到诸如Grid Wiz网站本身之类的服务器端渲染的应用程序。 (向Next.js喊话可以简化 SSR。)
如何使用网格向导 (How to Use Grid Wiz)
How does Grid Wiz work? As simply as possible.
Grid Wiz如何工作？ 尽可能简单。
Just provide your grid’s design spec as an object and get a string of CSS back:
只需将网格的设计规范作为一个对象提供，然后获取一串CSS：
// Check out https://grid-wiz.now.sh for more infoconst gridWiz = require("grid-wiz");var yourGridCSS = gridWiz({prefix: "bx--", // Prefix for all CSS class names. Can be empty.support: "displayGrid", // `displayFlex`, `cssVariables`, or `displayGrid`maxWidth: 1584, // Max-width of entire grid in pixels. Optional.progressive: false, // Include all browser support fallbacks older than selected supportsubgrid: true, // Embedded grids and rows know the remaining amount of columns available.breakpoints: [{name: "sm", // Class name prefix fot the breakpoint.size: 0, // Starting screen width in pixels of the breakpoint.columns: 4, // Amount of columns available.gutter: 32, // Space between content of adjacent columns in pixels.margin: 0 // Space on outside of entire grid in pixels.},{name: "md",size: 672,columns: 8,gutter: 32,margin: 16},{name: "lg",size: 1056,columns: 16,gutter: 32,margin: 16}]});
结论 (Conclusion)
Grid Wiz smoothly transitions teams from older browser specs, to CSS Grid, and then to features yet to be released.
Grid Wiz可以使团队从较早的浏览器规格平稳过渡到CSS Grid，然后过渡到尚未发布的功能。
I am excited to support this open-source project in the future and hope you will contribute also. If you run into any problems, please don’t hesitate to create a new issue on the GitHub repo for Grid Wiz!
我很高兴将来能够支持这个开源项目，希望您也能有所作为。 如果您遇到任何问题，请不要犹豫在Grid Wiz的GitHub存储库上创建新的问题！
If Grid Wiz helps you out, please leave the GitHub repo a star! You can also follow me on Twitter.
如果Grid Wiz可以帮助您，请给GitHub存储库加油 ！ 您也可以在Twitter上关注我。
Special thanks to Diego Hernandez, Jen Downs, and Josh Black for feedback that shaped this project. Also thanks to the maintainers of Babel, Next.js, and Rollup for making the project easy to make.
特别感谢Diego Hernandez ， Jen Downs和Josh Black的反馈，这些反馈对这个项目产生了影响。 同时还要感谢Babel ， Next.js和Rollup的维护人员 ，使该项目易于实现。
As always, thanks to freeCodeCamp and the community for being a great platform to share these tools on.
与往常一样，感谢freeCodeCamp和社区成为共享这些工具的好平台。
翻译自: /news/introducing-grid-wiz-make-a-css-grid-framework-with-custom-browser-support-at-the-snap-of-a-74e5c0a2e77/
filter wiz
