五款css布局工具，大大减少你写代码的时间

个有用的 CSS 布局生成器

1、 cssgr.id

如果你是前端开发人员，这是一个非常有用的网站。你可以首先指定所需的行数和列数，或者在给定的选项中进行选择，然后为其生成代码。这使你可以专注于设计的其他方面而不是布局。

2、csslayout.io

有多种选择可供选择，这个网站是一个隐藏的宝石。有 102 种模式可供选择，这让我们的工作更轻松，令人赞叹。如果你是前端开发人员，你一定要看看这个网站，你会对可用的选项范围感到惊讶。

3、Loading.io

Flexbox 现在非常有用，但有时再次测试时，它的一些属性会很令人沮丧。CSS Flexbox 布局功能强大而复杂。所以这里有一个快速的 flexbox 游乐场，用于使用 flex 布局技巧测试你的 CSS。

4、CSS grid-generator

使用这个网站，你可以设置数字、列和行的单位，它会为你生成一个 CSS 网格！在框内拖动以创建放置在网格内的 div。

5、grid. layout

网站上提供了默认布局，可以根据我们的需要进行修改并生成代码。用户可以更改行数、列数、行间距、列间距等，也可以指定对齐方式。

如果你是初学者，请尝试使用这些网站在一些帮助下自己编写代码，而不仅仅是复制粘贴它们。下次你开发漂亮的网站时，希望你利用这些工具网站并享受设计的乐趣。

家好，我是Echa。

又到周五啦，提前祝大家周末愉快！今天来分享一些实用的前端工具！

1. Small Dev tools

Small Dev Tools 是一个前端工具网站，包含了很多实用的功能，比如JSON解码器、JSON格式化程序、UTF8编码、Base64编码、Base64解码、CSS格式化程序、CSS压缩器等。

官网：https://smalldev.tools/

2. Carbon

Carbon 是一个在线工具，可以生成漂亮的不同风格的代码图片。

官网：https://carbon.now.sh/

3. UI Design Daily

UI 设计日报，提供免费优质的 UI 资源。

官网：https://www.uidesigndaily.com/

4. Color Hunt

ColorHunt，即颜色猎人，是一个在线设计配色的网站，其最大的特点就是使用饱和度调配配色方案。每天会根据浏览量进行更新排版，并可以直接使用。

官网：https://colorhunt.co/

5. SCHEME COLOR

SCHEME COLOR 是一个在线的配色工具网站，可以根据颜色、类型等查找合适的配色方案。

官网：https://www.schemecolor.com/

6. Keyframes

Keyframes 可以用来创建动画、阴影和使用颜色，帮助我们编写更好的CSS。

官网：https://keyframes.app/

7. Design Resources

Design Resources 是一个设计资源的集合。

官网：https://www.designresourc.es/

8. Omatsuri

Omatsuri 是一个开源项目，包含12个实用的前端工具。

官网：https://omatsuri.app/

9. UI Snippets

UI Snippets 是一个前端动画合集，可以通过右键点击想要的动画直接复制对应的 CSS 或 SCSS 代码。

官网：https://ui-snippets.dev/

10. Pattern CSS

Pattern CSS 可以用漂亮的图案填充空白背景。

官网：https://bansal.io/pattern-css

11. Can I use

Can I use 可以用来查询 HTML5、CSS、JS、SVG 在各种流行浏览器中的特性和兼容性。

官网：https://caniuse.com/

12. CSS Gradient

CSS Gradient 是一个用来快速方便的创建 CSS 渐变的网站。

官网：https://cssgradient.io/

13.CSS matic

CSS matic 是一个 CSS 工具，目前包含4个很有用的工具，分别是：支持各种颜色和透明度的渐变工具，使用渐变工具，可以创建渐变平滑的色彩变化效果和微妙的透明胶片；边框圆角工具可以帮助你方便的实现需要的圆角效果；噪声纹理可以帮助你创造奇妙的背景图案，能够实时预览结果；盒阴影工具可以控制模糊半径的变化，颜色变化，阴影大小，可以实现你想要的任何效果。

官网：https://www.cssmatic.com/

14.Am I Responsive

Am I Responsive 用来测试响应式网页。输入链接即可生成预览，Am I Responsive 能帮我们测试出页面在手机、平板电脑、笔记本电脑和桌面端设备上的浏览体验。

官网：http://ami.responsivedesign.is/

15. CSS Generator

这是一个实用的 CSS 生成器，可以实时查看调试效果。

官网：https://html-css-js.com/css/generator/

16. My Brand New Logo

My Brand New Logo 是一个CSS 调色板生成器，用来创建一致的调色板方案。

官网：https://mybrandnewlogo.com/color-palette-generator

17. 裁剪路径生成器

CSS cli-path 功能能够构建复杂的形状，该工具让我们可以轻松地以交互方式构建该多边形。

官网：https://bennettfeely.com/clippy/

18. CSS Grid Generator

CSS Grid Generator 是一个 Grid 布局生成器，通过这个工具可以快速创建自定义CSS Grid布局。

官网：https://cssgrid-generator.netlify.app/

19. CSS Layout Generator

CSS Layout Generator 布局生成器可以为布局组件创建 CSS 和 HTML 的工具。

官网：https://layout.bradwoods.io/

20. Fluid-responsive font-size calculator

Fluid-responsive font-size calculator 即响应式字体计算器，可以轻松创建流畅的排版体验。它有更广泛的支持，可以用几行 CSS 来实现。

官网：https://websemantics.uk/tools/responsive-font-calculator/

21. regex101

Regex101是学习、测试正则表达式的工具网站。

官网：https://regex101.com/

22. Regex-Vis

Regex-Vis 是一个正则表达式可视化器和编辑器。

官网：https://regex-vis.com/

23. Loupe

Loupe 是一个可视化工具，可帮助我们了解 JavaScript 的调用堆栈/事件循环/回调队列是如何执行的。

官网：http://latentflip.com/loupe/

24. RunJS

RunJS 是一个桌面应用程序，可帮助我们编写专门的 Javascript 和 Typescript 代码。它的一些优势是可以快速测试代码，轻松导入和测试库代码，并且能够修改界面、主题和字体以适应偏好。

官网：https://runjs.dev/

25. Wrap SVG Online

Wrap SVG Online 通过拖放从计算机上传图像，可以轻松地编辑网页的 SVG 图像。

官网：https://pavellaptev.github.io/warp-svg/

26. SVG Path Visualizer

SVG Path Visualizer 可以帮助我们通过输入 SVG 路径数据来快速直观地查看 SVG 图像。此外，该工具还提供了详细的说明，以便了解如何创建基本的 SVG 形状，如直线、曲线、三角形等。

官网：https://svg-path-visualizer.netlify.app/

27. BGJar

BGJar 是一个在线工具，可以轻松快速地为网站创建 SVG 背景。只需编辑必要的信息，它将自动导出图像或代码供我们应用到网站。

官网：https://bgjar.com/

28. Wavesnippets

Wavesnippets 可以将代码分步设置为动画、视频或 GIF。

官网：https://www.wavesnippets.com/

29. Generate SVG Waves

Generate SVG Waves 可以用来创建 SVG 波形背景。

官网：https://svgwave.in/

30. CodeSandbox

CodeSandbox 是一个为 Web 应用程序开发而构建的在线编辑器，支持多种主流框架。

官网：https://codesandbox.io/

31. Openbase

Openbase 帮助开发人员在数以百万计的开源软件包中进行选择和使用。

官网：https://openbase.com/

32. CodePen

CodePen 是一个在线的前端代码编辑工具，可用于制作测试页面、代码调试，所见即所得。

官网：https://codepen.io/

33. JSONLint

JSONLint 是一个 JSON 调试工具，如果遗漏了语法中的某些内容，它会进行检查。JSONLint 是处理大型 JSON 格式的绝佳工具，而且很容易上手。

官网：https://jsonlint.com/

34. Minify

Minifier 可以对 JavaScript 和 CSS 代码进行压缩，通过缩小可以提高网站加载速度。Minifier 通过删除 .js 和 .css 文件中的空白并重新格式化它们以减小大小。

官网：https://www.minifier.org/

35. Unminify

Unminify 和 Minifier 恰恰相反。使用 Unminify 可以使 .js 或 .css 文件可读。这两种工具都非常容易使用。

官网：https://unminify.com/

36. CRADIENT.ART

CRADIENT.ART 是一个高级 CSS 渐变编辑器，使用带有分层、设计工具和免费云存储的功能丰富的编辑器设计插图、图案、图标等。

官网：https://gra.dient.art/

37. 3DPop

3DPop 可以使用 CSS 生成很棒的 3D 文本效果。

官网：https://textpop3d.web.app/

38. CSS Photo Filters

CSS Photo Filters 是一个CSS图片滤镜工具，提供了 36 个 CSS 过滤器供我们使用。

官网：https://baseline.is/tools/css-photo-filters/

面我学习了Flex布局之后感觉是真的爽啊，比之前用浮动，定位方便太多了，之前几十行代码才能写完的布局，用了Flex10行左右就搞定了，今天学了Grid发现比Flex更爽，代码写的还要少，真是太厉害了，现在我把学习的相关知识梳理了一下，给大家分享一下，同时也可以作为我日后复习的笔记。

一、认识Grid属性

1.Grid容器属性：

属性说明：

grid-template-columns 轨道列宽

grid-template-rows 轨道行高

gap 轨道间距

grid-auto-columns 隐式轨道的列宽

grid-auto-rows 隐式轨道的行高

grid-auto-flow 隐式轨道排列方式，默认行优先

1.认识网格容器/网格项目/网格轨道/轨道间距

首先我们写出一个html结构，声明它的样式为网格布局：display:grid;

<div class="container">
    <span class="item">item1</span>
    <span class="item">item2</span>
    <span class="item">item3</span>
    <span class="item">item4</span>
    <span class="item">item5</span>
    <span class="item">item6</span>
</div>

效果图：

由此可见，之前的span元素为行内元素，在声明了网格布局之后，全部变为了块元素。
与之前的flex布局不一样，flex布局是行内元素。

以下是创建了一个2行3列的布局：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>网格容器/网格项目/网格轨道/轨道间距</title>
    <style>
        .container {
            border: 1px solid #000;
            padding: 0.5em;
            grid-template-columns: auto;
            grid-template-columns: 10em 10em auto;
            grid-template-rows: 5em 5em;
            gap: 0.5em;
        }
        .container > .item {
            background-color: lightcyan;
            border: 1px solid #000;
            padding: 0.5em;
        }
    </style>
</head>
<body>
    <div class="container">
        <span class="item">item1</span>
        <span class="item">item2</span>
        <span class="item">item3</span>
        <span class="item">item4</span>
        <span class="item">item5</span>
        <span class="item">item6</span>
    </div>
</body>
</html>

效果图：

通过上述案例我可以学习到网格布局的相关属性用法：

使用display: grid;声明一个网格布局，其中.container称为网格容器，其子元素span称为网格项目。
设置轨道的列宽：grid-template-columns：10em 10em auto，意思是声明了一个三列的网格布局，auto表示剩下的布局自适应。
设置轨道的行高：grid-template-rows：5em 5em，意思是声明了一个两行的网格布局，高度都是5em
设置轨道的间距：gap: 0.5em 0.5em，声明了轨道之间的间距，可以简写成gap:0.5em。
网格项目：网格容器中的“子元素”，与flex是一样的，默认生成一列N行的容器（N就是项目的数量）。

总结：

网格容器：由若干个矩形网格单元构成；
网络项目：网格容器的子元素，必须放在网格单元中；
网格单元：有“单元格”和“网格区域”两种表现形式；
网格轨道：由多个网格单元组成，根据排列方向有“行轨”和“列轨”之分；
轨道间距：容器中轨道之间的间距,有"行轨间距","列轨间距"。

2.自定义项目属性：

grid-area语法：grid-row-start / grid-column-start / grid-row-end / grid-column-end;

编号从左上角开始（1,1）并且是递增的。

相关属性说明：

grid-row-start 项目的起始行；
grid-column-start 项目的起始列；
grid-row-end 项目的结束行；
grid-column-end 项目的结束列。

2.自定义项目在容器中的显示位置

首先，还是先创建一个网格布局的html结构：

<div class="container">
    <div class="item">item1</div>
    <div class="item">item2</div>
    <div class="item">item3</div>
    <div class="item">item4</div>
    <div class="item">item5</div>
    <div class="item">item6</div>
    <div class="item">item7</div>
    <div class="item">item8</div>
    <div class="item">item9</div>
</div>

给出以下样式：

<style>
.container {
    border: 1px solid #000;
    padding: 0.5em;
    display: grid;
    /* 轨道列宽 */
    grid-template-columns: repeat(3, 1fr);
    /* 轨道行高 */
    grid-template-rows: 5em 5em;
    /* 行优先时要设置隐式轨道的行高 */
    grid-auto-rows: 5em;
    /* 轨道间距 */
    gap: 0.5em 1em;
}

.container > .item {
    background-color: lightcyan;
    border: 1px solid #000;
    padding: 0.5em;
}
</style>

效果图：

现在我们以第5个项目来举例，将它移动到第一个网格单元中：

<style>
.container .item:nth-of-type(5) {
    background-color: lightyellow;
    /* item5的默认位置 */
    grid-area: 2 / 2 / 3 / 3;
    /* 将它放入到第一个网格单元中 */
    grid-area: 1 / 1 / 2 / 2;
}
</style>

由于默认项目是跨越一行一列的，所以可以简写成下面的格式：

grid-area: 1 / 2;

效果图：

但是，如果是跨越1行1列以上的，就不能省略了。例如要跨越2行3列，就必须写成下面的格式：

grid-area: 1 / 1 / 3 / 4;

通常的情况是我们只关心跨越几行几列，并不关心它的结束行号，所以还可以这样写：

grid-area: 1 / 1 / span 2 / span 3;

所以，上述两种写法的效果是一样的。

效果图：

再以第1个项目为例，有如下样式：

<style>
    /* 添加一个浅绿色背景便于区分 */
    background-color: lightgreen;
    /* 默认位置 */
    grid-area: 1 / 1 / 2 / 2;
</style>

效果图：

如果现在要跨1行3列，可以写成如下格式：

grid-area: 1 / 1 / span 1 / span 3;

因为item1默认的位置是1 / 1，所以上述样式可以简写成：

grid-area: span 1 / span 3;

之前说过，项目默认的是跨1行1列，所以，可以简写成如下格式：

grid-area: auto / span 3;

由以上案例可以得出结论：

grid-area：参数数量不同，意义不同

1. 值中只有span

单值：跨的行数。
双值：跨的行与列数，如果只想设置列数，就必须设置行数（auto—）。

2. 值中有span和编号

双值：没有span，默认跨1行1列，grid-area： 2 / 3；
2.2 三值：省略列结束编号或跨的数量，此时前面的值可使用auto；
2.3 四值：最完整的语法。

3.网格单元尺寸的新单位：fr
设置轨道宽度时可以用一个新单位:fr(fraction)，类似于flex中的伸缩因子。

现有如下网格布局：

<div class="container">
    <div class="item">item1</div>
    <div class="item">item2</div>
    <div class="item">item3</div>
    <div class="item">item4</div>
    <div class="item">item5</div>
    <div class="item">item6</div>
</div>

给出如下样式：

<style>
.container {
    border: 1px solid #000;
    padding: 0.5em;
    display: grid;
    /* 轨道列宽 */
    grid-template-columns: 10em 10em 10em;
    /* 轨道行高 */
    grid-template-rows: 5em 5em;
    /* 轨道间距 */
    gap: 0.5em;
}
</style>

效果图：

此时我们可以在设置轨道宽度的时候使用一个新单位：fr（fraction），类似于flex的伸缩因子

grid-template-columns: auto auto auto;

效果图：

以上属性设置了一个自适应的3列等宽的布局，如果现在出现一个新的需求，中间一列的宽度是两边的二倍，那么auto就无法满足了，但是fr可以完美解决这个问题：

grid-template-columns: 1fr 2fr 1fr;

效果图：

总结：

% 与 fr可以共存，计算方式：总宽度减去百分比宽度，剩下的宽度都分给fr；
px是固定的，em也是固定的，计算时要减去这些固定值，将剩下的空间都分给fr；
auto，fr，% 都是相对单位，都可以触发自动计算机制，尽可能不要同时出现；
auto 与 px，em同时使用会自动计算。

4.网格单元尺寸的常用函数：repeat(),minmax()

还是跟上面案例一样的初始样式，现在如果我要设置一个3列10em宽度的布局，可以利用repeat()函数这样写：

grid-template-columns: repeat(3, 10em);

等价于下面的写法：

grid-template-columns: 10em 10em 10em;

repeat()的第二个参数可以是多个值

grid-template-columns: repeat(3, 10em 2em);

等价于下面的写法：

grid-template-columns: 10em 2em 10em 2em 10em 2em;

repeat()函数还可以与fr混合使用：

grid-template-columns: repeat(2, 1fr) 2fr;

等价于下面的写法：

grid-template-columns: 1fr 1fr 2fr;

3.minmax()函数

中间列，最小宽度是20em，最大宽度是左右的2倍

grid-template-columns: 1fr minmax(20em, 2fr) 1fr;

效果图：

grid-template-columns: 20em minmax(20em, 1fr);

效果图：

当使用1fr时，auto效果也一样，即使写成5fr也是可以的。

grid-template-columns: 20em minmax(20em, 1fr);

grid-template-columns: 20em minmax(20em, 5fr);

grid-template-columns: 20em minmax(20em, auto);

以上三种写法效果完全一样。

效果图：

5.网格单元的排列方式与隐式轨道

现有如下的html结构和样式：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>网格单元的排列方式与隐式轨道</title>
    <style>
        /* 网格容器 */
        .container {
            border: 1px solid #000;
            padding: 0.5em;
            display: grid;
            /* 轨道列宽 */
            grid-template-columns: repeat(3, 1fr);
            /* 轨道行高 */
            grid-template-rows: 5em 5em;
            /* 轨道间距 */
            gap: 0.5em 1em;
        }
        .container > .item {
            background-color: lightcyan;
            border: 1px solid #000;
            padding: 0.5em;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="item">item1</div>
        <div class="item">item2</div>
        <div class="item">item3</div>
        <div class="item">item4</div>
        <div class="item">item5</div>
        <div class="item">item6</div>
        <div class="item">item7</div>
        <div class="item">item8</div>
        <div class="item">item9</div>
    </div>
</body>
</html>

效果图：

此时声明的网格单元数量已经不够存放网格项目了，多出的三个项目会自动放入到自动生成的网格空间中了,这时，原来声明的网格单元叫做：显示轨道，新项目显示的轨道称为：隐式轨道。

此时，默认项目在容器中按照先行后列的顺序排列，即：“行优先”。

grid-auto-flow: row;

自动生成的隐式轨道的高度是自动的，因此，行优先时要设置隐式轨道的行高。

grid-auto-rows: 5em;

效果图：

列优先时，需要设置隐式轨道的列宽：

grid-auto-flow: column;
grid-auto-columns: 1fr;

效果图：

以上就是Grid布局的基本知识，个人感觉难度不是很大，就是属性有点多，需要花时间去牢记，多写一些布局，模仿一些网站这样对于掌握这些知识会有很大的帮助，这两天准备学习完Flex和Grid布局之后仿一个京东手机端的页面练练手。

如果有跟我一样才学习这些基础知识的朋友大家可以相互交流一下。

在线咨询

上一篇：前端入门-html 表单控件使用
下一篇：web前端入门JavaScript笔记二

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

五款css布局工具，大大减少你写代码的时间

1. Small Dev tools

2. Carbon

3. UI Design Daily

4. Color Hunt

5. SCHEME COLOR

6. Keyframes

7. Design Resources

8. Omatsuri

9. UI Snippets

10. Pattern CSS

11. Can I use

12. CSS Gradient

13.CSS matic

14.Am I Responsive

15. CSS Generator

16. My Brand New Logo

17. 裁剪路径生成器

18. CSS Grid Generator

19. CSS Layout Generator

20. Fluid-responsive font-size calculator

21. regex101

22. Regex-Vis

23. Loupe

24. RunJS

25. Wrap SVG Online

26. SVG Path Visualizer

27. BGJar

28. Wavesnippets

29. Generate SVG Waves

30. CodeSandbox

31. Openbase

32. CodePen

33. JSONLint

34. Minify

35. Unminify

36. CRADIENT.ART

37. 3DPop

38. CSS Photo Filters

一、认识Grid属性

1.认识网格容器/网格项目/网格轨道/轨道间距

2.自定义项目在容器中的显示位置

1. 值中只有span

2. 值中有span和编号

3.minmax()函数

您的项目需求