为您的布局提供5个Super CSS网格生成器

直接在代码编辑器中编写css网格布局会很有趣。尽管规范是一个复杂的文档，但是构建简单布局所需的关键概念并没有陡峭的学习曲线。

对于那些使用可视化编辑器感到更舒适的编码布局的人，您可以尝试一些有趣的在线选项。

这是五个具有出色视觉界面的CSS在线工具，我将逐步介绍它们。这个想法是：只需单击几下即可设计基于CSS Grid的布局，获取代码并运行它！让我们将此想法进行测试，看看会发生什么。

测试页面布局

在本文中，我将提供这个简单的手工编码的CSS网格布局。

该布局具有多个HTML容器标签，在嵌套结构中充当Grid容器。我本可以使用最近添加到Grid中的新的subgrid功能，但是在编写本文时，只有Firefox 69+支持它，并且这里讨论的所有在线生成器都尚未实现此功能。

对于大多数CSS Grid生成器，我将仅将测试重点放在<ul>用作单个卡的Grid容器的上。代码如下所示：

.kitties > ul {
      /* grid styles */
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
      grid-gap: 1rem;
    }

请注意grid-template-columns属性的值如何使您能够在没有媒体查询的情况下添加响应:

• 使用css grid的repeat（）函数和auto-fit属性。您可以添加任意数量的列，它们将完全适合网格的宽度，无论是什么。

• 使用minmax()函数，该函数确保每个列的宽度至少为320px，因此可以在较小的屏幕上很好地显示。

大多数CSS网格生成器都不包括使用上面的CSS网格特性设置网格模板列的功能，因此您需要调整media查询中工具生成的值，以向布局添加响应性。

在尝试css网格生成器工具时，我将用每个工具生成的代码替换上面的代码，并根据屏幕上显示的结果检查其功能。例外情况是列表中的第四个css网格生成器，它是由masaya kazama提供vue支持的工具。

这是因为它使构建整个布局（包括页眉和页脚）变得非常简单和快速，只需单击几下并对其中一个预设布局进行小调整。

1、CSS Grid Generator，作者：Sarah Drasner

CSS Grid Generator是由Sarah Drasner编码的闪亮的新生成器。 界面非常时尚，您可以立即将基本的CSS Grid布局放在一起。

我生成了一个两列的网格并转储了原始示例中的代码。您需要媒体查询来使布局响应。结果:

代码是这样的:

.kitties > ul {
    /* grid styles */
    display: grid;
    grid - template - columns: 320px 320px;
    grid - template - rows: 1fr 1fr;
    /* units for row and column gaps
       only available in px */
    grid - column - gap: 16px;
    grid - row - gap: 16px;
}

这个工具让你:

• 设置行和列的数量和单位

• 拖动方框，将div放在其中

在撰写本文时，Sarah的CSS Grid generator允许您创建基于网格的CSS布局的简单实现。这是作者明确指出的:

虽然这个项目可以为您提供一个基本的布局，但是这个项目并不是对CSS网格功能的全面介绍。这是一种快速使用CSS网格特性的方法。

然而，由于这是一个全新的开源工具，它仍在积极开发中，并邀请社区做出贡献。像minmax（）这样的复杂功能还没有实现，但它们可能会在以后的时间找到进入它的方法。

2、Leniolabs的LayoutIt

LayoutIt是相当直观的，有一些比CSS网格生成器更多的功能。例如，它允许您在px、em和%单位中设置网格-间隙属性，并使用minmax()设置网格-模板-列和网格-模板-行。但是，这还不足以确保响应性，因此仍然需要使用媒体查询调整值。

另外，我没有找到设置grid-gap属性的方法，所以如果您想在行和列之间留出空白，就必须手动设置。

这是我输入生成的代码到我的原始例子的结果:

以下是相关的代码:

kitties > ul {
    /* grid styles */
    display: grid;
    grid - template - columns: minmax(320px, 1fr) minmax(320px, 1fr);
    grid - template - rows: 1fr 1fr;
    /* grid gap not in code
      repeat, auto-fit, and auto-fill
      not there */
}

3、Drew Minns的《 Griddy》

使用Griddy您可以设置使用的列和行数fr，px，%和auto单位，但没有minmax()作用。您可以同时使用px和%和以及设置justify-items和align-items属性来在列和行中添加间隙，以在网格内对齐项目。您需要媒体查询来提高响应速度。

下面是生成的代码在屏幕上显示的内容:

下面是在原始演示中生成的代码:

.kitties > ul {
    list - style - type: none;
    /* grid styles */
    display: grid;
    /* no minmax */
    grid - template - columns: 320px 320px;
    grid - template - rows: 1fr 1fr;
    grid - column - gap: 16px;
    grid - row - gap: 16px;
}

4、Masaya Kazama的Vue Grid Generator

Vue Grid Generator有两个方便的预设布局、圣杯和文章列表，您可以通过添加和删除元素以及调整大小轻松自定义它们。这就是为什么我没有将自己限制在cards容器的CSS网格代码中，而是通过定制预先设置的文章列表布局来近似整个布局的原因。

此工具允许您使用网格模板区域和相关网格区域属性构建CSS网格。此外，您需要媒体查询来使页面响应，并且您只能手动设置grid-gap属性。

以下是我复制并粘贴生成的代码到新钢笔后的默认布局，并将html选择器的高度设置为100vh:

下面是最终的结果，经过一些CSS和HTML的调整，以近似的外观和感觉的原始演示:

5、CSS网格布局生成器，作者：Dmitrii Bykov

CSS网格布局生成器是由Dmitrii Bykov设计的一个功能齐全的CSS网格生成器。首先，您可以查看介绍视频，其中简要介绍了该工具的功能。

该工具为网格容器和网格项提供了大量的设置。可用的功能包括:

• 您可以内联设置网格

• 可以使用fr、px、em、rem、vw、vh、%、min-content、max-content设置列和行数，甚至可以使用minmax()和repeat()、auto-fit和auto-fill。这意味着您的布局可以立即响应

• 设置grid-gap属性时所有单位均可用

• 您可以通过设置调整您的网页内容justify-items，align-items，justify-content，align-content

回到我最初的演示，这个工具是列表中唯一一个可以复制原始代码功能的工具。

下面是代码页演示:

结论

如果您正在寻找使用可视化工具快速创建基本CSS网格布局的方法，那么使用CSS网格生成器非常方便。请记住，并不是所有令人惊叹的CSS网格特性都是由这些工具提供的。

在我列出的五种工具中，只有Dmitrii Bykov的CSS网格生成器能够实现规范中详细描述的大部分功能，并且能够完美地再现我最初的手工编码版本。

英文原文地址：https://www.sitepoint.com/css-grid-generators/

以上就是为您的布局提供5个Super CSS网格生成器的详细内容，更多请关注0133技术站其它相关文章！