中文布局CSS庫—chinese-layout

原文：https://www.toutiao.com/i6932061000481047054
作者：佛系攻城獅

上篇文章分享了一款史上最沒用的中文版的CSS漸變色庫，今天再來分享一篇它的兄弟庫chinese-layout。

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

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

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

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

是用方式

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

ul {
    /* 這個(gè)是固定寫法，必須先指定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é)就交給你們來決定，在此案例中chinese-layout只負(fù)責(zé)將父元素分割成九等分。

本文采用了chinese-gradient來作為背景色

安裝

要記得先引入這個(gè)庫才能夠去正常的使用。如果你的項(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>

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

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

然后再在子元素上寫上:

child {
  grid-area: 中;
}

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

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換成你想要的元素，如：

• 
  

來看看語法:

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

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

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

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

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

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

child1 {
    grid-area: 左;
}

child2 {
  grid-area: 右;
}

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

可以通過指定 grid-area 來顛倒DOM位置，沒事可以去試試。

全部原文請(qǐng)點(diǎn)擊文末原文連接

最近文章