言

上篇文章分享了一款史上最沒用的中文版的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布局。

居中

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: 中;
} 

子元素便會在父元素里水平垂直居中:

雙列

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位置，沒事可以去試試)

三列

咦？這不是雙列嗎？說好的三列呢？

其實是這樣，三列中的最中間一列被做成了自適應了，如果不給寬度并且也沒有任何帶寬度的子元素的話寬度就會為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位置，沒事可以去試試)

呂形

可是這看起來也不像呂形啊，呂不是應該上面一個口下面一個口嗎？

其實還是那個原理：上面的盒子如果不給高度的話默認為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: 上;
}

運行結果:

上下欄

看過前面幾種布局的朋友應該猜到了，是因為上盒子和下盒子沒給高度導致現在只能看見中間那欄，咱們給個高度再來看看:

<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: 下;
}

運行結果:

四宮格

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: 右下; }

運行結果：

六宮格

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: 右下; }

運行結果：

九宮格

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: 右下; }

運行結果：

鋪滿

看起來貌似啥也沒有，那是因為顧名思義，鋪滿就是子元素和父元素的大小一樣大嘛，來看看DOM結構：

<parent>
  <child/>
</parent>

DOM結構只是示意，真實布局時要把parent和child換成你想要的元素，如：<ul> <li></li> </ul>

parent {
  display: grid;
  gird: 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 屬性來單獨控制橫、縱間距：

雙飛翼

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 屬性來單獨控制橫、縱間距：

響應式

響應式布局會根據父元素的大小以及子元素的數量來自行決定如何排版

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;
}

總結

整體來說這款插件還是不錯的，使用簡單方便，中文命名雖然符合中國人的習慣，但命名太多比較依賴文檔。

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

<script language="javascript">
<!--
function numberyear(index)
{
    var i;
    var numberstring="零一二三四五六七八九";
    text = "";
    for (i = 0; i <4; i++)
    {
    point=parseInt(index.toString().substring(i,i+1));
    text = text + numberstring.substring(point,point+1);
    }
    return "公元"+text;
}
function number(index1)
{
    var numberstring="一二三四五六七八九十";
    if(index1 ==0)
    {document.write("十")}
    if(index1 < 10)
    {
    document.write(numberstring.substring(0+(index1-1),index1));
    }
    else if(index1 < 20)
    {
    document.write("十"+numberstring.substring(0+(index1-11),(index1-10)));
    }
    else if(index1 < 30)
    {
    document.write("二十"+numberstring.substring(0+(index1-21),(index1-20)));
    }
    else
    {
    document.write("三十"+numberstring.substring(0+(index1-31),(index1-30)));
    }
}
var today1 = new Date();
var year = today1.getYear();
var month = today1.getMonth()+1;
var date = today1.getDate();
var day = today1.getDay();
document.write("<b><font size = 6pt face = '華文彩云' Color = #0000FF>"+numberyear(year)+"年");
number(month);
document.write("月");
number(date);
document.write("日"+"</font></b>");
//-->
</script>

示結果:

公元一二四年四月九日