chinese-layouts v0.0.3

简介

Chinese Layouts 是一款利用 CSS 自定义属性来制作的中文布局 CSS 库，由于 Grid 布局十分强大，强大到甚至只需要两行 CSS 代码就可以完成一个基本的布局。但 Grid 属性较多较为复杂，并且不支持 IE 浏览器等特点导致了许多人并不很了解它。

不过近些年来随着 IE 浏览器的逐步退出市场，兼容性已经不再是特别需要纠结的一件事情了：

可以看到各大浏览器的支持情况已经较为乐观了，为了让大家快速体验 Grid 布局的强大之处，Chinese Layouts 就此诞生！

该库的尺寸十分轻量级，只有不到 1KB 的大小(653字节 并且还是未gzip压缩的情况)，使用起来也是十分的方便。

使用方式

假设现在有一个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 Layouts 只负责将父元素分割成九等分。

本文采用了chinese-gradients来作为背景色

安装

要记得先引入这个库才能够去正常的使用。如果你的项目是一个工程化的项目，那么：

npm i chinese-layouts

记得要在主文件中引入：

import 'chinese-layouts'

同时也支持sass、less等，如:

import 'chinese-layouts/chinese-layouts.scss'

如果你只是想在<link>标签里引入的话，那么：

全部布局

声明 display: grid;

首先一定要记得声明 display: grid; 因为 Chinese Layouts 底层依赖的就是 Grid 布局。

居中

<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>
  <child1 />
  <child2 />
</parent>

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