家好，我是Echa。

又到周五啦，提前祝大家周末愉快！今天來(lái)分享一些實(shí)用的前端工具！

1. Small Dev tools

Small Dev Tools 是一個(gè)前端工具網(wǎng)站，包含了很多實(shí)用的功能，比如JSON解碼器、JSON格式化程序、UTF8編碼、Base64編碼、Base64解碼、CSS格式化程序、CSS壓縮器等。

官網(wǎng)：https://smalldev.tools/

2. Carbon

Carbon 是一個(gè)在線工具，可以生成漂亮的不同風(fēng)格的代碼圖片。

官網(wǎng)：https://carbon.now.sh/

3. UI Design Daily

UI 設(shè)計(jì)日?qǐng)?bào)，提供免費(fèi)優(yōu)質(zhì)的 UI 資源。

官網(wǎng)：https://www.uidesigndaily.com/

4. Color Hunt

ColorHunt，即顏色獵人，是一個(gè)在線設(shè)計(jì)配色的網(wǎng)站，其最大的特點(diǎn)就是使用飽和度調(diào)配配色方案。每天會(huì)根據(jù)瀏覽量進(jìn)行更新排版，并可以直接使用。

官網(wǎng)：https://colorhunt.co/

5. SCHEME COLOR

SCHEME COLOR 是一個(gè)在線的配色工具網(wǎng)站，可以根據(jù)顏色、類型等查找合適的配色方案。

官網(wǎng)：https://www.schemecolor.com/

6. Keyframes

Keyframes 可以用來(lái)創(chuàng)建動(dòng)畫(huà)、陰影和使用顏色，幫助我們編寫(xiě)更好的CSS。

官網(wǎng)：https://keyframes.app/

7. Design Resources

Design Resources 是一個(gè)設(shè)計(jì)資源的集合。

官網(wǎng)：https://www.designresourc.es/

8. Omatsuri

Omatsuri 是一個(gè)開(kāi)源項(xiàng)目，包含12個(gè)實(shí)用的前端工具。

官網(wǎng)：https://omatsuri.app/

9. UI Snippets

UI Snippets 是一個(gè)前端動(dòng)畫(huà)合集，可以通過(guò)右鍵點(diǎn)擊想要的動(dòng)畫(huà)直接復(fù)制對(duì)應(yīng)的 CSS 或 SCSS 代碼。

官網(wǎng)：https://ui-snippets.dev/

10. Pattern CSS

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

官網(wǎng)：https://bansal.io/pattern-css

11. Can I use

Can I use 可以用來(lái)查詢 HTML5、CSS、JS、SVG 在各種流行瀏覽器中的特性和兼容性。

官網(wǎng)：https://caniuse.com/

12. CSS Gradient

CSS Gradient 是一個(gè)用來(lái)快速方便的創(chuàng)建 CSS 漸變的網(wǎng)站。

官網(wǎng)：https://cssgradient.io/

13.CSS matic

CSS matic 是一個(gè) CSS 工具，目前包含4個(gè)很有用的工具，分別是：支持各種顏色和透明度的漸變工具，使用漸變工具，可以創(chuàng)建漸變平滑的色彩變化效果和微妙的透明膠片；邊框圓角工具可以幫助你方便的實(shí)現(xiàn)需要的圓角效果；噪聲紋理可以幫助你創(chuàng)造奇妙的背景圖案，能夠?qū)崟r(shí)預(yù)覽結(jié)果；盒陰影工具可以控制模糊半徑的變化，顏色變化，陰影大小，可以實(shí)現(xiàn)你想要的任何效果。

官網(wǎng)：https://www.cssmatic.com/

14.Am I Responsive

Am I Responsive 用來(lái)測(cè)試響應(yīng)式網(wǎng)頁(yè)。輸入鏈接即可生成預(yù)覽，Am I Responsive 能幫我們測(cè)試出頁(yè)面在手機(jī)、平板電腦、筆記本電腦和桌面端設(shè)備上的瀏覽體驗(yàn)。

官網(wǎng)：http://ami.responsivedesign.is/

15. CSS Generator

這是一個(gè)實(shí)用的 CSS 生成器，可以實(shí)時(shí)查看調(diào)試效果。

官網(wǎng)：https://html-css-js.com/css/generator/

16. My Brand New Logo

My Brand New Logo 是一個(gè)CSS 調(diào)色板生成器，用來(lái)創(chuàng)建一致的調(diào)色板方案。

官網(wǎng)：https://mybrandnewlogo.com/color-palette-generator

17. 裁剪路徑生成器

CSS cli-path 功能能夠構(gòu)建復(fù)雜的形狀，該工具讓我們可以輕松地以交互方式構(gòu)建該多邊形。

官網(wǎng)：https://bennettfeely.com/clippy/

18. CSS Grid Generator

CSS Grid Generator 是一個(gè) Grid 布局生成器，通過(guò)這個(gè)工具可以快速創(chuàng)建自定義CSS Grid布局。

官網(wǎng)：https://cssgrid-generator.netlify.app/

19. CSS Layout Generator

CSS Layout Generator 布局生成器可以為布局組件創(chuàng)建 CSS 和 HTML 的工具。

官網(wǎng)：https://layout.bradwoods.io/

20. Fluid-responsive font-size calculator

Fluid-responsive font-size calculator 即響應(yīng)式字體計(jì)算器，可以輕松創(chuàng)建流暢的排版體驗(yàn)。它有更廣泛的支持，可以用幾行 CSS 來(lái)實(shí)現(xiàn)。

官網(wǎng)：https://websemantics.uk/tools/responsive-font-calculator/

21. regex101

Regex101是學(xué)習(xí)、測(cè)試正則表達(dá)式的工具網(wǎng)站。

官網(wǎng)：https://regex101.com/

22. Regex-Vis

Regex-Vis 是一個(gè)正則表達(dá)式可視化器和編輯器。

官網(wǎng)：https://regex-vis.com/

23. Loupe

Loupe 是一個(gè)可視化工具，可幫助我們了解 JavaScript 的調(diào)用堆棧/事件循環(huán)/回調(diào)隊(duì)列是如何執(zhí)行的。

官網(wǎng)：http://latentflip.com/loupe/

24. RunJS

RunJS 是一個(gè)桌面應(yīng)用程序，可幫助我們編寫(xiě)專門(mén)的 Javascript 和 Typescript 代碼。它的一些優(yōu)勢(shì)是可以快速測(cè)試代碼，輕松導(dǎo)入和測(cè)試庫(kù)代碼，并且能夠修改界面、主題和字體以適應(yīng)偏好。

官網(wǎng)：https://runjs.dev/

25. Wrap SVG Online

Wrap SVG Online 通過(guò)拖放從計(jì)算機(jī)上傳圖像，可以輕松地編輯網(wǎng)頁(yè)的 SVG 圖像。

官網(wǎng)：https://pavellaptev.github.io/warp-svg/

26. SVG Path Visualizer

SVG Path Visualizer 可以幫助我們通過(guò)輸入 SVG 路徑數(shù)據(jù)來(lái)快速直觀地查看 SVG 圖像。此外，該工具還提供了詳細(xì)的說(shuō)明，以便了解如何創(chuàng)建基本的 SVG 形狀，如直線、曲線、三角形等。

官網(wǎng)：https://svg-path-visualizer.netlify.app/

27. BGJar

BGJar 是一個(gè)在線工具，可以輕松快速地為網(wǎng)站創(chuàng)建 SVG 背景。只需編輯必要的信息，它將自動(dòng)導(dǎo)出圖像或代碼供我們應(yīng)用到網(wǎng)站。

官網(wǎng)：https://bgjar.com/

28. Wavesnippets

Wavesnippets 可以將代碼分步設(shè)置為動(dòng)畫(huà)、視頻或 GIF。

官網(wǎng)：https://www.wavesnippets.com/

29. Generate SVG Waves

Generate SVG Waves 可以用來(lái)創(chuàng)建 SVG 波形背景。

官網(wǎng)：https://svgwave.in/

30. CodeSandbox

CodeSandbox 是一個(gè)為 Web 應(yīng)用程序開(kāi)發(fā)而構(gòu)建的在線編輯器，支持多種主流框架。

官網(wǎng)：https://codesandbox.io/

31. Openbase

Openbase 幫助開(kāi)發(fā)人員在數(shù)以百萬(wàn)計(jì)的開(kāi)源軟件包中進(jìn)行選擇和使用。

官網(wǎng)：https://openbase.com/

32. CodePen

CodePen 是一個(gè)在線的前端代碼編輯工具，可用于制作測(cè)試頁(yè)面、代碼調(diào)試，所見(jiàn)即所得。

官網(wǎng)：https://codepen.io/

33. JSONLint

JSONLint 是一個(gè) JSON 調(diào)試工具，如果遺漏了語(yǔ)法中的某些內(nèi)容，它會(huì)進(jìn)行檢查。JSONLint 是處理大型 JSON 格式的絕佳工具，而且很容易上手。

官網(wǎng)：https://jsonlint.com/

34. Minify

Minifier 可以對(duì) JavaScript 和 CSS 代碼進(jìn)行壓縮，通過(guò)縮小可以提高網(wǎng)站加載速度。Minifier 通過(guò)刪除 .js 和 .css 文件中的空白并重新格式化它們以減小大小。

官網(wǎng)：https://www.minifier.org/

35. Unminify

Unminify 和 Minifier 恰恰相反。使用 Unminify 可以使 .js 或 .css 文件可讀。這兩種工具都非常容易使用。

官網(wǎng)：https://unminify.com/

36. CRADIENT.ART

CRADIENT.ART 是一個(gè)高級(jí) CSS 漸變編輯器，使用帶有分層、設(shè)計(jì)工具和免費(fèi)云存儲(chǔ)的功能豐富的編輯器設(shè)計(jì)插圖、圖案、圖標(biāo)等。

官網(wǎng)：https://gra.dient.art/

37. 3DPop

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

官網(wǎng)：https://textpop3d.web.app/

38. CSS Photo Filters

CSS Photo Filters 是一個(gè)CSS圖片濾鏡工具，提供了 36 個(gè) CSS 過(guò)濾器供我們使用。

官網(wǎng)：https://baseline.is/tools/css-photo-filters/

言

上篇文章分享了一款史上最沒(méi)用的中文版的CSS漸變色庫(kù)，今天再來(lái)分享一篇它的兄弟庫(kù)chinese-layout。

chinese-layout是一款利用CSS自定義屬性來(lái)制作的中文布局CSS庫(kù)，由于grid布局十分強(qiáng)大，強(qiáng)大到甚至只需要兩行CSS代碼就可以完成一個(gè)基本的布局。不過(guò)grid屬性較多較為復(fù)雜，并且不支持IE瀏覽器等特點(diǎn)導(dǎo)致了許多人并不很了解它。

不過(guò)近些年來(lái)隨著IE瀏覽器的逐步退出市場(chǎng)，兼容性已經(jīng)不再是特別需要糾結(jié)的一件事情了：

可以看到各大瀏覽器的支持情況已經(jīng)較為樂(lè)觀了，為了讓大家快速體驗(yàn)grid布局的強(qiáng)大之處，chinese-layout就此誕生！

該庫(kù)的尺寸十分輕量級(jí)，只有不到1KB的大小(653字節(jié))，并且使用起來(lái)也是十分的方便。

使用方式

假設(shè)現(xiàn)在有一個(gè)ul元素，我們想要它變?yōu)橐粋€(gè)九宮格的布局，首先需要在ul元素上寫(xiě)：

ul {
    /* 這個(gè)是固定寫(xiě)法，必須先指定display為grid */
    display: grid;
  
  /* grid屬性需要指定哪種布局 */
  grid: var(--九宮格);
  
  /* 加入一點(diǎn)間距，讓九個(gè)元素相互之間有一定的距離 */
  gap: 10px;
}

然后在父元素里面添加九個(gè)元素：

<ul>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>

這就完事啦：

當(dāng)然這里其實(shí)是省略了一些父元素上的寬高以及子元素的顏色等細(xì)節(jié)。

這些細(xì)節(jié)就交給你們來(lái)決定，在此案例中chinese-layout只負(fù)責(zé)將父元素分割成九等分。

本文采用了chinese-gradient來(lái)作為背景色

安裝

要記得先引入這個(gè)庫(kù)才能夠去正常的使用。如果你的項(xiàng)目是一個(gè)工程化的項(xiàng)目，那么：

npm i chinese-layout

記得要在主文件中引入：

import 'chinese-layout'

同時(shí)也支持sass、less等，如:

import 'chinese-layout/chinese-layout.scss'

如果你只是想在<link>標(biāo)簽里引入的話，那么：

<link rel="stylesheet" href="https://unpkg.zhimg.com/chinese-layout">

全部布局

聲明 display: grid;

首先一定要記得聲明 display: grid;

因?yàn)閏hinese-layout底層依賴的就是grid布局。

居中

DOM結(jié)構(gòu):

<parent>
  <child/>
</parent>

DOM結(jié)構(gòu)只是示意，真實(shí)布局時(shí)要把parent和child換成你想要的元素，如：<ul> <li></li> </ul>

這種布局需要先在父元素上寫(xiě)這么兩行代碼:

parent {
  display: grid;
  grid: var(--居中);
}

然后再在子元素上寫(xiě)上:

child {
  grid-area: 中;
} 

但是看起來(lái)除了灰蒙蒙一片的背景好像啥也沒(méi)有是吧，那是因?yàn)槲覀儧](méi)給子元素加上寬高，而且子元素里也沒(méi)有任何的內(nèi)容，導(dǎo)致子元素寬高為0不可見(jiàn)，那么現(xiàn)在我們來(lái)給子元素一個(gè)寬高再來(lái)看看：

child {
  width: 20px;
  height: 20px;
  grid-area: 中;
} 

子元素便會(huì)在父元素里水平垂直居中:

雙列

DOM結(jié)構(gòu):

parent {
  display: grid;
  grid: var(--雙列);
}

DOM結(jié)構(gòu)只是示意，真實(shí)布局時(shí)要把parent和child換成你想要的元素，如：<ul> <li></li> </ul>

來(lái)看看語(yǔ)法:

parent {
  display: grid;
  grid: var(--雙列);
}

可以看到現(xiàn)在兩列緊緊的貼合在一起了，不過(guò)有時(shí)候這兩列我們并不想它們緊貼在一起，這時(shí)我們可以使用 gap 屬性來(lái)控制列與列之間的間距：

parent {
  display: grid;
  grid: var(--雙列);
  gap: 10px;
}

運(yùn)行結(jié)果:

可以看到列與列直接距離變成我們?cè)O(shè)置的10px了，但 gap 屬性只會(huì)改變列與列之間的距離，并不會(huì)改變與父元素之間的距離，所以之前緊貼著父元素的現(xiàn)在還是緊貼著父元素，如果想與父元素有間距的話可以給父元素加padding:

雙列布局是不需要指定子元素的 grid-area 屬性的，不過(guò)你要是非要想指定一下的話也不是不可以:

child1 {
    grid-area: 左;
}

child2 {
  grid-area: 右;
}

運(yùn)行結(jié)果:

(可以通過(guò)指定grid-area來(lái)顛倒DOM位置，沒(méi)事可以去試試)

三列

咦？這不是雙列嗎？說(shuō)好的三列呢？

其實(shí)是這樣，三列中的最中間一列被做成了自適應(yīng)了，如果不給寬度并且也沒(méi)有任何帶寬度的子元素的話寬度就會(huì)為0，所以就看不到最中間那列啦！

那咱們給中間的DOM元素一個(gè)寬度吧:

<parent>
  <child1/>
  <child2/>
  <child3/>
</parent>

DOM結(jié)構(gòu)只是示意，真實(shí)布局時(shí)要把parent和child換成你想要的元素，如：<ul> <li></li> </ul>

parent {
    display: grid;
  grid: var(--三列);
}
child2 {
    width: 800px;
}

運(yùn)行結(jié)果:

也可以不給寬度，直接用內(nèi)容去撐開(kāi):

<parent>
  <child1/>
  <child2>child2</child2>
  <child3/>
</parent>

運(yùn)行結(jié)果:

也同樣可以用gap屬性來(lái)控制間距:

parent {
    display: grid;
  grid: var(--三列);
  gap: 10px;
}
child2 {
    width: 800px;
}

運(yùn)行結(jié)果:

三列布局是不需要指定子元素的 grid-area 屬性的，不過(guò)你要是非要想指定一下的話也不是不可以:

child1 {
    grid-area: 左;
}

child2 {
  grid-area: 中;
}

child2 {
  grid-area: 右;
}

運(yùn)行結(jié)果：

(可以通過(guò)指定子元素的 grid-area 屬性來(lái)顛倒DOM位置，沒(méi)事可以去試試)

呂形

可是這看起來(lái)也不像呂形啊，呂不是應(yīng)該上面一個(gè)口下面一個(gè)口嗎？

其實(shí)還是那個(gè)原理：上面的盒子如果不給高度的話默認(rèn)為0。

那咱們給個(gè)高度再看看:

<parent>
  <child1/>
  <child2/>
</parent>

DOM結(jié)構(gòu)只是示意，真實(shí)布局時(shí)要把parent和child換成你想要的元素，如：<ul> <li></li> </ul>

parent {
    display: grid;
  grid: var(--呂形);
}
child1 {
    height: 100px;
}
child2 {
    overflow-y: auto;
}

運(yùn)行結(jié)果：

還可以通過(guò) gap 屬性來(lái)控制間距:

parent {
    display: grid;
  grid: var(--呂形);
  gap: 10px;
}
child1 {
    height: 100px;
}

運(yùn)行結(jié)果：

也可以通過(guò)指定子元素的 grid-area 屬性來(lái)顛倒DOM位置:

parent {
    display: grid;
  grid: var(--呂形);
  gap: 10px;
}
child1 {
  grid-area: 下;
  overflow-y: auto;
}
child2 {
  height: 100px;
  grid-area: 上;
}

運(yùn)行結(jié)果:

上下欄

看過(guò)前面幾種布局的朋友應(yīng)該猜到了，是因?yàn)樯虾凶雍拖潞凶記](méi)給高度導(dǎo)致現(xiàn)在只能看見(jiàn)中間那欄，咱們給個(gè)高度再來(lái)看看:

<parent>
  <child1/>
  <child2/>
  <child3/>
</parent>

DOM結(jié)構(gòu)只是示意，真實(shí)布局時(shí)要把parent和child換成你想要的元素，如：<ul> <li></li> </ul>

parent {
    display: grid;
  grid: var(--上下欄);
}
child1 {
    height: 80px;
}
child2 {
  overflow-y: auto;
}
child3 {
  height: 100px;
}

運(yùn)行結(jié)果：

還可以通過(guò) gap 屬性來(lái)控制間距:

parent {
    display: grid;
  grid: var(--上下欄);
  gap: 10px;
}
child1 {
    height: 80px;
}
child2 {
  overflow-y: auto;
}
child3 {
  height: 100px;
}

運(yùn)行結(jié)果：

也可以通過(guò)指定子元素的 grid-area 屬性來(lái)顛倒DOM位置:

parent {
    display: grid;
  grid: var(--上下欄);
  gap: 10px;
}
child1 {
  grid-area: 中;
  overflow-y: auto;
}
child2 {
  height: 80px;
  grid-area: 上;
}
child3 {
  height: 100px;
  grid-area: 下;
}

運(yùn)行結(jié)果:

四宮格

DOM結(jié)構(gòu)：

<parent>
  <child1/>
  <child2/>
  <child3/>
  <child4/>
<parent/>

DOM結(jié)構(gòu)只是示意，真實(shí)布局時(shí)要把parent和child換成你想要的元素，如：<ul> <li></li> </ul>

parent {
  display: grid;
  grid: var(--四宮格);
}

如果不想各個(gè)宮格緊貼在一起，可以用 gap 屬性來(lái)控制間距：

parent {
  display: grid;
  grid: var(--四宮格);
  gap: 10px;
}

運(yùn)行結(jié)果：

gap 屬性是控制行和列之間間距的，但如果你想要行間距和列間距不一樣的話，就要用到下面兩個(gè)屬性了：

• row-gap：行與行之間的間距
• column-gap：列與列之間的間距

也可以通過(guò) grid-area 屬性來(lái)重新分配DOM元素的位置：

child1 { grid-area: 左上; }
child2 { grid-area: 右上; }
child3 { grid-area: 左下; }
child4 { grid-area: 右下; }

運(yùn)行結(jié)果：

六宮格

DOM結(jié)構(gòu)：

<parent>
  <child1/>
  <child2/>
  <child3/>
  <child4/>
  <child5/>
  <child6/>
<parent/>

DOM結(jié)構(gòu)只是示意，真實(shí)布局時(shí)要把parent和child換成你想要的元素，如：<ul> <li></li> </ul>

parent {
  display: grid;
  grid: var(--六宮格);
}

如果不想各個(gè)宮格緊貼在一起，可以用 gap 屬性來(lái)控制間距：

parent {
  display: grid;
  grid: var(--六宮格);
  gap: 10px;
}

運(yùn)行結(jié)果：

gap 屬性是控制行和列之間間距的，但如果你想要行間距和列間距不一樣的話，就要用到下面兩個(gè)屬性了：

• row-gap：行與行之間的間距
• column-gap：列與列之間的間距

也可以通過(guò) grid-area 屬性來(lái)重新分配DOM元素的位置：

child1 { grid-area: 左上; }
child2 { grid-area: 右上; }
child3 { grid-area: 左下; }
child4 { grid-area: 右下; }

運(yùn)行結(jié)果：

九宮格

DOM結(jié)構(gòu)：

<parent>
  <child1/>
  <child2/>
  <child3/>
  <child4/>
  <child5/>
  <child6/>
  <child7/>
  <child8/>
  <child9/>
<parent/>

DOM結(jié)構(gòu)只是示意，真實(shí)布局時(shí)要把parent和child換成你想要的元素，如：<ul> <li></li> </ul>

parent {
  display: grid;
  grid: var(--九宮格);
}

如果不想各個(gè)宮格緊貼在一起，可以用 gap 屬性來(lái)控制間距：

parent {
  display: grid;
  grid: var(--九宮格);
  gap: 10px;
}

運(yùn)行結(jié)果：

gap 屬性是控制行和列之間間距的，但如果你想要行間距和列間距不一樣的話，就要用到下面兩個(gè)屬性了：

• row-gap：行與行之間的間距
• column-gap：列與列之間的間距

也可以通過(guò) grid-area 屬性來(lái)重新分配DOM元素的位置：

child1 { grid-area: 左上; }
child2 { grid-area: 中上; }
child3 { grid-area: 右上; }
child4 { grid-area: 左中; }
child5 { grid-area: 中中; }
child6 { grid-area: 右中; }
child7 { grid-area: 左下; }
child8 { grid-area: 中下; }
child9 { grid-area: 右下; }

運(yùn)行結(jié)果：

鋪滿

看起來(lái)貌似啥也沒(méi)有，那是因?yàn)轭櫭剂x，鋪滿就是子元素和父元素的大小一樣大嘛，來(lái)看看DOM結(jié)構(gòu)：

<parent>
  <child/>
</parent>

DOM結(jié)構(gòu)只是示意，真實(shí)布局時(shí)要把parent和child換成你想要的元素，如：<ul> <li></li> </ul>

parent {
  display: grid;
  gird: var(--鋪滿);
}

圣杯

DOM結(jié)構(gòu)：

<parent>
  <child1/>
  <child2/>
  <child3/>
  <child4/>
  <child5/>
</parent>

DOM結(jié)構(gòu)只是示意，真實(shí)布局時(shí)要把parent和child換成你想要的元素，如：<ul> <li></li> </ul>

圣杯布局的子元素必須指定位置：

parent {
  display: grid;
  grid: var(--圣杯);
}
child1 { grid-area: 上; }
child2 { grid-area: 左; }
child3 { grid-area: 中; }
child4 { grid-area: 右; }
child5 { grid-area: 下; }

但是看起來(lái)并沒(méi)有看到圣杯布局的影子，灰蒙蒙的一片，還是那個(gè)原因，把上下左右的寬高控制權(quán)都留給用戶，如果子元素里沒(méi)有任何內(nèi)容并且沒(méi)有指定寬高的話就不會(huì)顯示在屏幕上，我們來(lái)給個(gè)合適的寬高再看看：

parent {
  display: grid;
  grid: var(--圣杯);
}
child1 {
  height: 80px;
  grid-area: 上;
}
child2 {
  width: 100px;
  grid-area: 左;
}
child3 { grid-area: 中; }
child4 {
  width: 100px;
  grid-area: 右;
}
child5 {
  height: 80px;
  grid-area: 下;
}

運(yùn)行結(jié)果：

再給個(gè)間距看看效果：

parent {
  display: grid;
  grid: var(--圣杯);
  gap: 10px;
}

運(yùn)行結(jié)果：

不給寬高只靠子元素的內(nèi)容撐起來(lái)也可以，而且可以缺少某一個(gè)DOM元素，比如我們不想要"右"了：

<parent>
  <child1/>
  <child2/>
  <child3/>
  <child4/>
</parent>

DOM結(jié)構(gòu)只是示意，真實(shí)布局時(shí)要把parent和child換成你想要的元素，如：<ul> <li></li> </ul>

parent {
  display: grid;
  grid: var(--圣杯);
  gap: 10px;
}
child1 {
  height: 80px;
  grid-area: 上;
}
child2 {
  width: 100px;
  grid-area: 左;
}
child3 { grid-area: 中; }
child4 {
  height: 80px;
  grid-area: 下;
}

運(yùn)行結(jié)果：

雖然看起來(lái)"中"的右側(cè)受 gap 屬性的影響導(dǎo)致有一定的間距，但我們可以不加 gap，靠 margin 來(lái)控制間距：

parent > child {
  margin: 10px;
}

運(yùn)行結(jié)果：

即使不給"中"設(shè)置寬高，"中"也會(huì)根據(jù)父元素的寬高來(lái)自動(dòng)調(diào)整自己的寬高大小。

也可以靠 row-gap 和 column-gap 屬性來(lái)單獨(dú)控制橫、縱間距：

雙飛翼

DOM結(jié)構(gòu)：

<parent>
  <child1/>
  <child2/>
  <child3/>
  <child4/>
  <child5/>
</parent>

DOM結(jié)構(gòu)只是示意，真實(shí)布局時(shí)要把parent和child換成你想要的元素，如：<ul> <li></li> </ul>

雙飛翼布局的子元素必須指定位置：

parent {
  display: grid;
  grid: var(--雙飛翼);
}
child1 { grid-area: 上; }
child2 { grid-area: 左; }
child3 { grid-area: 中; }
child4 { grid-area: 右; }
child5 { grid-area: 下; }

但是看起來(lái)并沒(méi)有看到雙飛翼布局的影子，灰蒙蒙的一片，還是那個(gè)原因，把上下左右的寬高控制權(quán)都留給用戶，如果子元素里沒(méi)有任何內(nèi)容并且沒(méi)有指定寬高的話就不會(huì)顯示在屏幕上，我們來(lái)給個(gè)合適的寬高再看看：

parent {
  display: grid;
  grid: var(--雙飛翼);
}
child1 {
  height: 80px;
  grid-area: 上;
}
child2 {
  width: 100px;
  grid-area: 左;
}
child3 { grid-area: 中; }
child4 {
  width: 100px;
  grid-area: 右;
}
child5 {
  height: 80px;
  grid-area: 下;
}

運(yùn)行結(jié)果：

再給個(gè)間距看看效果：

parent {
  display: grid;
  grid: var(--雙飛翼);
  gap: 10px;
}

運(yùn)行結(jié)果：

不給寬高只靠子元素的內(nèi)容撐起來(lái)也可以，而且可以缺少某一個(gè)DOM元素，比如我們不想要"右"了：

<parent>
  <child1/>
  <child2/>
  <child3/>
  <child4/>
</parent>

DOM結(jié)構(gòu)只是示意，真實(shí)布局時(shí)要把parent和child換成你想要的元素，如：<ul> <li></li> </ul>

parent {
  display: grid;
  grid: var(--雙飛翼);
  gap: 10px;
}
child1 {
  height: 80px;
  grid-area: 上;
}
child2 {
  width: 100px;
  grid-area: 左;
}
child3 { grid-area: 中; }
child4 {
  height: 80px;
  grid-area: 下;
}

運(yùn)行結(jié)果：

雖然看起來(lái)"中"的右側(cè)受 gap 屬性的影響導(dǎo)致有一定的間距，但我們可以不加 gap ，靠 margin 來(lái)控制間距：

parent > child {
  margin: 10px;
}

運(yùn)行結(jié)果：

即使不給"中"設(shè)置寬高，"中"也會(huì)根據(jù)父元素的寬高來(lái)自動(dòng)調(diào)整自己的寬高大小。

也可以靠 row-gap 和 column-gap 屬性來(lái)單獨(dú)控制橫、縱間距：

響應(yīng)式

響應(yīng)式布局會(huì)根據(jù)父元素的大小以及子元素的數(shù)量來(lái)自行決定如何排版

DOM結(jié)構(gòu):

<parent>
  <child1/>
    <child2/>
   ......
    <child-N/>
</parent>

DOM結(jié)構(gòu)只是示意，真實(shí)布局時(shí)要把parent和child換成你想要的元素，如：<ul> <li></li> </ul>

parent {
  display: grid;
  grid: var(--響應(yīng)式);
}

不過(guò)每列的最小寬度默認(rèn)是100px，如果想改變這一大小的話需要在 :root 選擇器上定義一個(gè) --寬 變量，比如想要寬變成30px：

:root {
  --寬: 30px;
}

如果每個(gè)子元素之間的距離太近了的話別忘記用 gap 屬性來(lái)控制間距哦：

parent {
  display: grid;
  grid: var(--響應(yīng)式);
  gap: 10px;
}

總結(jié)

整體來(lái)說(shuō)這款插件還是不錯(cuò)的，使用簡(jiǎn)單方便，中文命名雖然符合中國(guó)人的習(xí)慣，但命名太多比較依賴文檔。

還在為布局頭疼的朋友可以快速入手哦！