前言
上篇文章分享了一款史上最沒用的中文版的CSS漸變色庫，今天再來分享一篇它的兄弟庫chinese-layout。
chinese-layout是一款利用CSS自定義屬性來製作的中文佈局CSS庫，由於grid佈局十分強大，強大到甚至只需要兩行CSS程式碼就可以完成一個基本的佈局。不過grid屬性較多較為複雜，並且不支援IE瀏覽器等特點導致了許多人並不很瞭解它。
不過近些年來隨著IE瀏覽器的逐步退出市場，相容性已經不再是特別需要糾結的一件事情了：
可以看到各大瀏覽器的支援情況已經較為樂觀了，為了讓大家快速體驗grid佈局的強大之處，chinese-layout就此誕生！
該庫的尺寸十分輕量級，只有不到1KB的大小(653位元組)，並且使用起來也是十分的方便。
使用方式假設現在有一個ul元素，我們想要它變為一個九宮格的佈局，首先需要在ul元素上寫：
ul { /* 這個是固定寫法，必須先指定display為grid */ display: grid; /* grid屬性需要指定哪種佈局 */ grid: var(--九宮格); /* 加入一點間距，讓九個元素相互之間有一定的距離 */ gap: 10px;}然後在父元素裡面新增九個元素：
<ul> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li></ul>這就完事啦：
當然這裡其實是省略了一些父元素上的寬高以及子元素的顏色等細節。
這些細節就交給你們來決定，在此案例中chinese-layout只負責將父元素分割成九等分。
本文采用了chinese-gradient來作為背景色
安裝要記得先引入這個庫才能夠去正常的使用。如果你的專案是一個工程化的專案，那麼：
npm i chinese-layout
記得要在主檔案中引入：
import 'chinese-layout'
同時也支援sass、less等，如:
import 'chinese-layout/chinese-layout.scss'
如果你只是想在<link>標籤裡引入的話，那麼：
<link rel="stylesheet" href="https://unpkg.zhimg.com/chinese-layout">
全部佈局宣告 display: grid;首先一定要記得宣告 display: grid;
因為chinese-layout底層依賴的就是grid佈局。
居中grid: var(--居中)
DOM結構:
<parent> <child/></parent>DOM結構只是示意，真實佈局時要把parent和child換成你想要的元素，如：<ul> <li></li> </ul>
這種佈局需要先在父元素上寫這麼兩行程式碼:
parent { display: grid; grid: var(--居中);}然後再在子元素上寫上:
child { grid-area: 中;} 但是看起來除了灰濛濛一片的背景好像啥也沒有是吧，那是因為我們沒給子元素加上寬高，而且子元素裡也沒有任何的內容，導致子元素寬高為0不可見，那麼現在我們來給子元素一個寬高再來看看：
child { width: 20px; height: 20px; grid-area: 中;} 子元素便會在父元素裡水平垂直居中:
雙列grid: var(--雙列)
DOM結構:
parent { display: grid; grid: var(--雙列);}DOM結構只是示意，真實佈局時要把parent和child換成你想要的元素，如：<ul> <li></li> </ul>
來看看語法:
parent { display: grid; grid: var(--雙列);}可以看到現在兩列緊緊的貼合在一起了，不過有時候這兩列我們並不想它們緊貼在一起，這時我們可以使用 gap 屬性來控制列與列之間的間距：
parent { display: grid; grid: var(--雙列); gap: 10px;}執行結果:
可以看到列與列直接距離變成我們設定的10px了，但 gap 屬性只會改變列與列之間的距離，並不會改變與父元素之間的距離，所以之前緊貼著父元素的現在還是緊貼著父元素，如果想與父元素有間距的話可以給父元素加padding:
雙列布局是不需要指定子元素的 grid-area 屬性的，不過你要是非要想指定一下的話也不是不可以:
child1 { grid-area: 左;}child2 { grid-area: 右;}執行結果:
(可以透過指定grid-area來顛倒DOM位置，沒事可以去試試)
三列grid: var(--三列)
咦？這不是雙列嗎？說好的三列呢？
其實是這樣，三列中的最中間一列被做成了自適應了，如果不給寬度並且也沒有任何頻寬度的子元素的話寬度就會為0，所以就看不到最中間那列啦！
那咱們給中間的DOM元素一個寬度吧:
<parent> <child1/> <child2/> <child3/></parent>DOM結構只是示意，真實佈局時要把parent和child換成你想要的元素，如：<ul> <li></li> </ul>
parent { display: grid; grid: var(--三列);}child2 { width: 800px;}執行結果:
也可以不給寬度，直接用內容去撐開:
<parent> <child1/> <child2>child2</child2> <child3/></parent>執行結果:
也同樣可以用gap屬性來控制間距:
parent { display: grid; grid: var(--三列); gap: 10px;}child2 { width: 800px;}執行結果:
三列布局是不需要指定子元素的 grid-area 屬性的，不過你要是非要想指定一下的話也不是不可以:
child1 { grid-area: 左;}child2 { grid-area: 中;}child2 { grid-area: 右;}執行結果：
(可以透過指定子元素的 grid-area 屬性來顛倒DOM位置，沒事可以去試試)
呂形grid: var(--呂形)
可是這看起來也不像呂形啊，呂不是應該上面一個口下面一個口嗎？
其實還是那個原理：上面的盒子如果不給高度的話預設為0。
那咱們給個高度再看看:
<parent> <child1/> <child2/></parent>DOM結構只是示意，真實佈局時要把parent和child換成你想要的元素，如：<ul> <li></li> </ul>
parent { display: grid; grid: var(--呂形);}child1 { height: 100px;}child2 { overflow-y: auto;}執行結果：
還可以透過 gap 屬性來控制間距:
parent { display: grid; grid: var(--呂形); gap: 10px;}child1 { height: 100px;}執行結果：
也可以透過指定子元素的 grid-area 屬性來顛倒DOM位置:
parent { display: grid; grid: var(--呂形); gap: 10px;}child1 { grid-area: 下; overflow-y: auto;}child2 { height: 100px; grid-area: 上;}執行結果:
上下欄grid: var(--上下欄)
看過前面幾種佈局的朋友應該猜到了，是因為上盒子和下盒子沒給高度導致現在只能看見中間那欄，咱們給個高度再來看看:
<parent> <child1/> <child2/> <child3/></parent>DOM結構只是示意，真實佈局時要把parent和child換成你想要的元素，如：<ul> <li></li> </ul>
parent { display: grid; grid: var(--上下欄);}child1 { height: 80px;}child2 { overflow-y: auto;}child3 { height: 100px;}執行結果：
還可以透過 gap 屬性來控制間距:
parent { display: grid; grid: var(--上下欄); gap: 10px;}child1 { height: 80px;}child2 { overflow-y: auto;}child3 { height: 100px;}執行結果：
也可以透過指定子元素的 grid-area 屬性來顛倒DOM位置:
parent { display: grid; grid: var(--上下欄); gap: 10px;}child1 { grid-area: 中; overflow-y: auto;}child2 { height: 80px; grid-area: 上;}child3 { height: 100px; grid-area: 下;}執行結果:
四宮格grid: var(--四宮格)
DOM結構：
<parent> <child1/> <child2/> <child3/> <child4/><parent/>DOM結構只是示意，真實佈局時要把parent和child換成你想要的元素，如：<ul> <li></li> </ul>
parent { display: grid; grid: var(--四宮格);}如果不想各個宮格緊貼在一起，可以用 gap 屬性來控制間距：
parent { display: grid; grid: var(--四宮格); gap: 10px;}執行結果：
gap 屬性是控制行和列之間間距的，但如果你想要行間距和列間距不一樣的話，就要用到下面兩個屬性了：
row-gap：行與行之間的間距column-gap：列與列之間的間距也可以透過 grid-area 屬性來重新分配DOM元素的位置：
child1 { grid-area: 左上; }child2 { grid-area: 右上; }child3 { grid-area: 左下; }child4 { grid-area: 右下; }執行結果：
六宮格grid: var(--六宮格)
DOM結構：
<parent> <child1/> <child2/> <child3/> <child4/> <child5/> <child6/><parent/>DOM結構只是示意，真實佈局時要把parent和child換成你想要的元素，如：<ul> <li></li> </ul>
parent { display: grid; grid: var(--六宮格);}如果不想各個宮格緊貼在一起，可以用 gap 屬性來控制間距：
parent { display: grid; grid: var(--六宮格); gap: 10px;}執行結果：
gap 屬性是控制行和列之間間距的，但如果你想要行間距和列間距不一樣的話，就要用到下面兩個屬性了：
row-gap：行與行之間的間距column-gap：列與列之間的間距也可以透過 grid-area 屬性來重新分配DOM元素的位置：
child1 { grid-area: 左上; }child2 { grid-area: 右上; }child3 { grid-area: 左下; }child4 { grid-area: 右下; }執行結果：
九宮格grid: var(--九宮格)
DOM結構：
<parent> <child1/> <child2/> <child3/> <child4/> <child5/> <child6/> <child7/> <child8/> <child9/><parent/>DOM結構只是示意，真實佈局時要把parent和child換成你想要的元素，如：<ul> <li></li> </ul>
parent { display: grid; grid: var(--九宮格);}如果不想各個宮格緊貼在一起，可以用 gap 屬性來控制間距：
parent { display: grid; grid: var(--九宮格); gap: 10px;}執行結果：
gap 屬性是控制行和列之間間距的，但如果你想要行間距和列間距不一樣的話，就要用到下面兩個屬性了：
row-gap：行與行之間的間距column-gap：列與列之間的間距也可以透過 grid-area 屬性來重新分配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: 右下; }執行結果：
鋪滿grid: var(--鋪滿)
看起來貌似啥也沒有，那是因為顧名思義，鋪滿就是子元素和父元素的大小一樣大嘛，來看看DOM結構：
<parent> <child/></parent>DOM結構只是示意，真實佈局時要把parent和child換成你想要的元素，如：<ul> <li></li> </ul>
parent { display: grid; gird: var(--鋪滿);}grid: var(--聖盃)
DOM結構：
<parent> <child1/> <child2/> <child3/> <child4/> <child5/></parent>DOM結構只是示意，真實佈局時要把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: 下; }但是看起來並沒有看到聖盃佈局的影子，灰濛濛的一片，還是那個原因，把上下左右的寬高控制權都留給使用者，如果子元素裡沒有任何內容並且沒有指定寬高的話就不會顯示在螢幕上，我們來給個合適的寬高再看看：
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: 下;}執行結果：
再給個間距看看效果：
parent { display: grid; grid: var(--聖盃); gap: 10px;}執行結果：
不給寬高只靠子元素的內容撐起來也可以，而且可以缺少某一個DOM元素，比如我們不想要"右"了：
<parent> <child1/> <child2/> <child3/> <child4/></parent>DOM結構只是示意，真實佈局時要把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: 下;}執行結果：
雖然看起來"中"的右側受 gap 屬性的影響導致有一定的間距，但我們可以不加 gap，靠 margin 來控制間距：
parent > child { margin: 10px;}執行結果：
即使不給"中"設定寬高，"中"也會根據父元素的寬高來自動調整自己的寬高大小。
也可以靠 row-gap 和 column-gap 屬性來單獨控制橫、縱間距：
雙飛翼grid: var(--雙飛翼)
DOM結構：
<parent> <child1/> <child2/> <child3/> <child4/> <child5/></parent>DOM結構只是示意，真實佈局時要把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: 下; }但是看起來並沒有看到雙飛翼佈局的影子，灰濛濛的一片，還是那個原因，把上下左右的寬高控制權都留給使用者，如果子元素裡沒有任何內容並且沒有指定寬高的話就不會顯示在螢幕上，我們來給個合適的寬高再看看：
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: 下;}執行結果：
再給個間距看看效果：
parent { display: grid; grid: var(--雙飛翼); gap: 10px;}執行結果：
不給寬高只靠子元素的內容撐起來也可以，而且可以缺少某一個DOM元素，比如我們不想要"右"了：
<parent> <child1/> <child2/> <child3/> <child4/></parent>DOM結構只是示意，真實佈局時要把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: 下;}執行結果：
雖然看起來"中"的右側受 gap 屬性的影響導致有一定的間距，但我們可以不加 gap ，靠 margin 來控制間距：
parent > child { margin: 10px;}執行結果：
即使不給"中"設定寬高，"中"也會根據父元素的寬高來自動調整自己的寬高大小。
也可以靠 row-gap 和 column-gap 屬性來單獨控制橫、縱間距：
響應式grid: var(--響應式)
響應式佈局會根據父元素的大小以及子元素的數量來自行決定如何排版
DOM結構:
<parent> <child1/> <child2/> ...... <child-N/></parent>DOM結構只是示意，真實佈局時要把parent和child換成你想要的元素，如：<ul> <li></li> </ul>
parent { display: grid; grid: var(--響應式);}不過每列的最小寬度預設是100px，如果想改變這一大小的話需要在 :root 選擇器上定義一個 --寬 變數，比如想要寬變成30px：
:root { --寬: 30px;}如果每個子元素之間的距離太近了的話別忘記用 gap 屬性來控制間距哦：
parent { display: grid; grid: var(--響應式); gap: 10px;}整體來說這款外掛還是不錯的，使用簡單方便，中文命名雖然符合中國人的習慣，但命名太多比較依賴文件。
還在為佈局頭疼的朋友可以快速入手哦！