5冷CSS网格生成器

毫无疑问,CSS网格对于网页设计师来说是一个非常强大和令人兴奋的工具。它在布局方面开辟了大量新的可能性。然而,至少可以说,让您的头脑了解语法是一件很有挑战性的事情。如果您正在挣扎,CSS网格生成器将在这里提供帮助。有了它们,您就可以可视化地构建网格布局,它们将输出正确的代码。

已经出现了许多这样的工具,它们确实很有用,特别是如果您不是语法专家的话。在这里,我们来看看最好的选择。想学更多吗?看看我们的CSS网格综合指南

01. 拉尤蒂!CSS网格生成器

Layoutit! CSS Grid generator

开始我们的列表是来自Layoutit的CSS网格生成器!使用此工具,您可以交互式地选择网格区域,使用按钮添加列和行,命名网格区域。您可以下载代码或将设计保存为可共享的permalink。

02. Cssgr.id

cssgr.id

Id提供了与以前的工具类似的特性,但是界面风格不同(您喜欢哪种风格的界面可能会取决于个人的喜好)。这个工具的一个方便的特性是您可以添加LoremIpsum文本。这是伦敦开发商丹·尼斯顿的作品。

03. CSS网格模板生成器

CSS Grid Template Builder

这个CodePen演示由创造性开发人员Anthony Dugois提供,在我们的列表中是一个非常独特的选项。它使您能够主要使用编辑的字符串构建网格布局,然后将其作为网格模板区属性。

04. CSS网格

CSS Gridish

IBMTeam的这个项目获取产品网格的设计规范,并为您的团队构建几个资源供您的团队使用。这些资源包括带有图板和网格/布局设置的Sketch文件、使用CSS Grid的CSS/SCSS代码以及带有CSS柔性盒回退的CSS/SCSS代码,以及Chrome扩展。

05. CSS网格布局生成器

这是Dmitrii Bykov的一个相对较新的工具。首先创建“跟踪”(列和行),然后添加项,然后导出代码。这需要一些习惯-上面的一分钟屏幕是有用的帮助你开始。

Generate new york

生成,获奖大会网页设计师,返回纽约4月24日-25日!点击图片预定门票

本文最初发表于 ,这是全球最畅销的网页设计师和开发者杂志。购买 第316期 要么 订阅

阅读更多:



翻译字数超限