五款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()函數

您的項目需求