5个可视化 CSS 网格布局生成器

梦里梦外; 2022-09-13 00:25 456阅读 0赞

![2e581608d6c9d24a2e29607fd7275d04.png][]

英文 | https://blog.bitsrc.io/top-5-css-grid-layout-generators-f7743f0dfad2

翻译 | 杨小二

现代 Web 应用程序是响应式的。尽管很多 CSS 库和框架都支持 Grid 系统，但使用纯 CSS 网格也正在成为一种趋势。因此，如果你知道正确的使用工具，则可以更轻松地从头生成网格布局。

因此，在本文中，我将介绍 5 个最好的 CSS 布局生成器，并进行功能比较，以帮助你直观地生成 CSS 网格。

**1、Griddy**

![7275d1c696f31bb6f88d04adcf88dfda.png][]

Griddy 是设计师和开发人员中最常用的 CSS 网格生成器之一。

使用 Griddy，你只需配置行、列、间隙和对齐即可轻松创建 2D 布局。

以下示例显示了使用 Griddy 生成的 CSS 类，其中 2 列、3 行对齐并居中对齐。

![9b5c13483f7b18ee8fe4bb37f212aa42.gif][]

.container { 
       display: grid; 
       grid-template-columns: 100px 100px; 
       grid-template-rows: 100px 100px; 
       grid-column-gap: 20px 
       grid-row-gap: 20px 
       justify-items: center 
       align-items: center 
    }

Griddy的特点：

*  允许使用像素 (px)、小数 (fr) 和百分比 (%) 调整列和行的大小。
 *  你可以使用多个单位在单个网格中调整大小。
 *  你可以测试不同的对齐和对齐选项。

**2、Layoutit**

![dcf8ff8daed9295464935d68434b534a.png][]

Layoutit 是一个开源的交互式 CSS 网格生成器。

Layoutit 的功能几乎与 Griddy 相似。但是当你对网格进行更改时，它会实时更新 HTML 和 CSS 代码。

以下示例显示了使用 Layoutit 生成的简单网格的 HTML 和 CSS 代码。

<div class=”container”>
     <div ></div>
     <div ></div>
    </div>
    .container {
      display: grid;
      grid-template-columns: 10fr;
      grid-template-rows: 10fr;
      grid-auto-columns: 10fr;
      grid-auto-rows: 10fr;
      gap: 50px 50px;
      grid-auto-flow: row;
      justify-items: center;
      align-items: center;
      grid-template-areas:
        ".";
    }

Layoutit的特点：

*  你可以从头开始，也可以从基本模板之一开始。
 *  你只需将元素拖放到要放置它们的列内。
 *  允许使用像素 (px)、小数 (fr) 和百分比 (%) 调整列和行的大小。
 *  支持 UI 中的网格放置选项。

**3、CSS Grid Layout 生成器**

![896865f1d0580cba1a998beaf946d062.png][]

CSS Grid Layout 提供了多种设置来配置网格容器和网格项。这个生成器的另一个特点是它为你提供 3 种不同格式的输出代码：通用 CSS、JSX 和样式组件。

// Output as HTML and CSS Class
    .container {
       display: grid;
       grid-template-columns: 1fr 1fr;
       grid-template-rows: 1fr 1fr;
       grid-gap: 1em 1em;
    }
    .item-2 {
       grid-area: 1 / 2 / 2 / 2;
    }
    .item-3 {
       grid-area: 2 / 1 / 2 / 2;
    }
    // Output as styled-component
    import styled from 'styled-components'
    const Container = styled.div`
     display: grid;
     grid-template-columns: 1fr 1fr;
     grid-template-rows: 1fr 1fr;
     grid-gap: 1em 1em;
    `
    const Item2 = styled.div`
     grid-area: 1 / 2 / 2 / 2;
    `
    const Item3 = styled.div`
     grid-area: 2 / 1 / 2 / 2;
    `

CSS Grid Layout Generator 的特点：

可以分别配置容器和项目设置。

与其他 CSS 生成器相比，它提供了多种调整大小的选项。你可以使用 fr、px、em、rem、vw、vh、%、min-content、max-content、minmax()、repeat()、auto-fit 和 auto-fill 调整行和列的大小。

可以使用 justify-items、align-items、justify-content 和 align-content 选项轻松对齐内容。

输出代码可以生成为 CSS 类、支持 JSX 的 CSS 模块和样式组件。

**4、CSS Grid 生成器**

![b83c726a90c8eff9fcfea69c9690f810.png][]

使用 CSS Grid Generator，你需要做的就是给出行数、列数以及行列之间的间距。然后，单击一个按钮，它将提供一个如下所示的 CSS 类：

.parent {
       display: grid;
       grid-template-columns: repeat(5, 1fr);
       grid-template-rows: repeat(5, 1fr);
       grid-column-gap: 1px;
       grid-row-gap: 1px;
    }

#  #

![85818d5161b9823b324e82678aae07d1.gif][]

CSS 网格生成器的特点：

提供简单的界面并在几秒钟内生成布局。

允许通过拖动将潜水放置在框内。

CSS Grid Generator 是一个托管在 Netlify 中的开源项目，你也可以通过访问他们的 GitHub 存储库来为它做出贡献。

**5、cssgr.id**

![90625933abfeb1b3c4e1ffd9b338ea97.png][]

cssgr.id 是你能找到的最简单的 CSS 网格生成器之一。

CSS Grid Generator 是一个托管在 Netlify 中的开源项目，你也可以通过访问他们的 GitHub 存储库来为它做出贡献。

cssgr.id 的特点：

提供 5 种起始布局可供选择，如 3x3、足球队形、页眉页脚、画廊和通用网站。

你可以添加占位符文本并查看你的布局与文本的外观。

可以通过添加项数、列数和间隙数来轻松配置。

提供 HTML 和 CSS 类作为输出。

以下代码显示了一个与画廊形态对齐的 5 个项目的示例。

// HTML
    <div class="grid">
      <div class="span-col-3 span-row-2">Item 1</div>
      <div>Item 2</div>
      <div class="span-row-2">Item 3</div>
      <div class="span-row-3">Item 4</div>
      <div>Item 5</div>
    </div>
    // CSS Classes
    .grid {
        display: grid;
        grid-template-columns: repeat(6, 1fr);
        grid-gap: 10px;
    }
    .span-col-3{grid-column: span 3 / auto;}
    
    
    .span-row-2{grid-row: span 2 / auto;}
    
    
    .span-row-3{grid-row: span 3 / auto;}

**结论**

CSS 网格生成器是开发人员在几分钟内生成简单 CSS 布局的便捷工具。除了我在这里讨论的这5款工具之外，还有很多类似的工具，你应该根据自己的需求进行选择。

例如，CSS Grid Generator 和 cssgr.id 等工具不提供对齐选项。但它们使用起来非常简单。

我希望我的建议能帮助到你，并为你的项目选择最好的 CSS 网格生成器。并且不要忘记在使用这些库后分享你的想法。

感谢阅读！！！

**学习更多技能**

**请点击下方公众号**

![ba28395ede4d719e4339cdae5bc996db.gif][]

![1067a31ce1ca93c0d888a720a9b57806.png][]

![be4b5e9e1ec56c06cad16e32c50f07c2.png][]

[2e581608d6c9d24a2e29607fd7275d04.png]: /images/20220828/958235993cce4b32a183957507eec839.png
[7275d1c696f31bb6f88d04adcf88dfda.png]: /images/20220828/575d388fbf0444f09ab6702881682d57.png
[9b5c13483f7b18ee8fe4bb37f212aa42.gif]: /images/20220828/d6d74e33b18d4c008ff4406074907b90.png
[dcf8ff8daed9295464935d68434b534a.png]: /images/20220828/ff2c840339c644ac82f472be88f686e1.png
[896865f1d0580cba1a998beaf946d062.png]: /images/20220828/27c0ab04610947dd9a344eeefe537d9a.png
[b83c726a90c8eff9fcfea69c9690f810.png]: /images/20220828/8212161ab12146a2a8181c52ad368c21.png
[85818d5161b9823b324e82678aae07d1.gif]: /images/20220828/1f7d7b6dfee9447790aa48d8ab96fb9c.png
[90625933abfeb1b3c4e1ffd9b338ea97.png]: /images/20220828/b29b8013efd548a89c506c3c77b3adb2.png
[ba28395ede4d719e4339cdae5bc996db.gif]: /images/20220828/be07edf6e77f42c2b99d938785f5658f.png
[1067a31ce1ca93c0d888a720a9b57806.png]: /images/20220828/0510e66eed024bb5bc26b294c7828628.png
[be4b5e9e1ec56c06cad16e32c50f07c2.png]: /images/20220828/28dec4646ab845f5ab28e5a04a40bdce.png