# chinese-layouts
> 中文版的 grid 布局
Latest version **0.0.3** (published 2022-12-31) · MIT license · 0 weekly downloads
## Install
```sh
npm install chinese-layouts
pnpm add chinese-layouts
yarn add chinese-layouts
bun add chinese-layouts
```
## Health
**Score 15/100 (F)** — status: abandoned.
Positive: no vulnerabilities.
Warnings: low downloads; no types; no esm support; pre 1.0.
Negative: abandoned; low maintenance score.
## Facts
| | |
|---|---|
| Version | 0.0.3 |
| Published | 2022-12-31 |
| First published | 2020-06-13 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 28.6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | fancy-components |
| Keywords | 中文, grid, layouts, 布局 |
## Links
- npm: https://www.npmjs.com/package/chinese-layouts
- npm.io page: https://npm.io/package/chinese-layouts
## Alternatives
- [@lexical/table](https://npm.io/package/@lexical/table.md) — 3.0M weekly downloads
- [mantine-datatable](https://npm.io/package/mantine-datatable.md) — 98.2K weekly downloads
- [react-native-collapsible-tab-view](https://npm.io/package/react-native-collapsible-tab-view.md) — 70.6K weekly downloads
- [@handsontable/vue3](https://npm.io/package/@handsontable/vue3.md) — 16.1K weekly downloads
- [vuewordcloud](https://npm.io/package/vuewordcloud.md) — 7.2K weekly downloads
## Recent versions
- 0.0.3 (latest) — 2022-12-31
- 0.0.2 — 2022-12-31
- 0.0.1 — 2022-12-31
- 0.0.0 — 2020-06-13
## README
# 简介
`Chinese Layouts` 是一款利用 `CSS` 自定义属性来制作的中文布局 `CSS` 库，由于 `Grid` 布局十分强大，强大到甚至只需要两行 `CSS` 代码就可以完成一个基本的布局。但 `Grid` 属性较多较为复杂，并且不支持 `IE` 浏览器等特点导致了许多人并不很了解它。
不过近些年来随着 `IE` 浏览器的逐步退出市场，兼容性已经不再是特别需要纠结的一件事情了：
可以看到各大浏览器的支持情况已经较为乐观了，为了让大家快速体验 `Grid` 布局的强大之处，`Chinese Layouts` 就此诞生！
该库的尺寸十分轻量级，只有不到 `1KB` 的大小(`653`字节 并且还是未`gzip`压缩的情况)，使用起来也是十分的方便。
## 使用方式
假设现在有一个`ul`元素，我们想要它变为一个九宫格的布局，首先需要在`ul`元素上写：
```css
ul {
/* 这个是固定写法，必须先指定display为grid */
display: grid;
/* grid属性需要指定哪种布局 */
grid: var(--九宫格);
/* 加入一点间距，让九个元素相互之间有一定的距离 */
gap: 10px;
}
```
然后在父元素里面添加九个元素：
```html
```
这就完事啦：
当然这里其实是省略了一些父元素上的宽高以及子元素的颜色等细节。
这些细节就交给你们来决定，在此案例中 `Chinese Layouts` 只负责将父元素分割成九等分。
> 本文采用了[chinese-gradients](https://www.npmjs.com/package/chinese-gradients)来作为背景色
# 安装
要记得先引入这个库才能够去正常的使用。如果你的项目是一个工程化的项目，那么：
> npm i chinese-layouts
记得要在主文件中引入：
> import 'chinese-layouts'
同时也支持`sass`、`less`等，如:
> import 'chinese-layouts/chinese-layouts.scss'
如果你只是想在``标签里引入的话，那么：
>
# 全部布局
## 声明 `display: grid;`
首先一定要记得声明 `display: grid;`
因为 `Chinese Layouts` 底层依赖的就是 `Grid` 布局。
## 居中
grid: var(--居中);
`DOM` 结构:
```html
```
> `DOM` 结构只是示意，真实布局时要把 `parent` 和 `child` 换成你想要的元素，如：``
这种布局需要先在父元素上写这么两行代码:
```css
parent {
display: grid;
grid: var(--居中);
}
```
然后再在子元素上写上:
```css
child {
grid-area: 中;
}
```
但是看起来除了灰蒙蒙一片的背景好像啥也没有是吧，那是因为我们没给子元素加上宽高，而且子元素里也没有任何的内容，导致子元素宽高为`0`不可见，那么现在我们来给子元素一个宽高再来看看：
```css
child {
width: 20px;
height: 20px;
grid-area: 中;
}
```
子元素便会在父元素里水平垂直居中:
## 双列
grid: var(--双列);
`DOM` 结构:
```html
```
> `DOM` 结构只是示意，真实布局时要把 `parent` 和 `child` 换成你想要的元素，如：``
来看看语法:
```css
parent {
display: grid;
grid: var(--双列);
}
```
可以看到现在两列紧紧的贴合在一起了，不过有时候这两列我们并不想它们紧贴在一起，这时我们可以使用 `gap` 属性来控制列与列之间的间距：
```css
parent {
display: grid;
grid: var(--双列);
gap: 10px;
}
```
运行结果:
可以看到列与列直接距离变成我们设置的`10px`了，但 `gap` 属性只会改变列与列之间的距离，并不会改变与父元素之间的距离，所以之前紧贴着父元素的现在还是紧贴着父元素，如果想与父元素有间距的话可以给父元素加 `padding`:
双列布局是不需要指定子元素的 `grid-area` 属性的，不过你要是非要想指定一下的话也不是不可以:
```css
child1 {
grid-area: 左;
}
child2 {
grid-area: 右;
}
```
运行结果:
(可以通过指定 `grid-area` 来颠倒 `DOM` 位置，没事可以去试试)
## 三列
grid: var(--三列);
咦？这不是双列吗？说好的三列呢？
其实是这样，三列中的最中间一列被做成了自适应了，如果不给宽度并且也没有任何带宽度的子元素的话宽度就会为`0`，所以就看不到最中间那列啦！
那咱们给中间的 `DOM` 元素一个宽度吧:
```html
```
> `DOM` 结构只是示意，真实布局时要把 `parent` 和 `child` 换成你想要的元素，如：``
```css
parent {
display: grid;
grid: var(--三列);
}
child2 {
width: 800px;
}
```
运行结果:
也可以不给宽度，直接用内容去撑开:
```html
child2
```
运行结果:
也同样可以用 `gap` 属性来控制间距:
```css
parent {
display: grid;
grid: var(--三列);
gap: 10px;
}
child2 {
width: 800px;
}
```
运行结果:
三列布局是不需要指定子元素的 `grid-area` 属性的，不过你要是非要想指定一下的话也不是不可以:
```css
child1 {
grid-area: 左;
}
child2 {
grid-area: 中;
}
child2 {
grid-area: 右;
}
```
运行结果：
(可以通过指定子元素的 `grid-area` 属性来颠倒 `DOM` 位置，没事可以去试试)
## 吕形
grid: var(--吕形);
可是这看起来也不像吕形啊，吕不是应该上面一个口下面一个口吗？
其实还是那个原理：上面的盒子如果不给高度的话默认为 `0`。
那咱们给个高度再看看:
```html
```
`DOM` 结构只是示意，真实布局时要把 `parent` 和 `child` 换成你想要的元素，如：``
```css
parent {
display: grid;
grid: var(--吕形);
}
child1 {
height: 100px;
}
child2 {
overflow-y: auto;
}
```
运行结果：
还可以通过 `gap` 属性来控制间距:
```css
parent {
display: grid;
grid: var(--吕形);
gap: 10px;
}
child1 {
height: 100px;
}
```
运行结果：
也可以通过指定子元素的 `grid-area` 属性来颠倒 `DOM` 位置:
```css
parent {
display: grid;
grid: var(--吕形);
gap: 10px;
}
child1 {
grid-area: 下;
overflow-y: auto;
}
child2 {
height: 100px;
grid-area: 上;
}
```
运行结果:
## 上下栏
grid: var(--上下栏);
看过前面几种布局的朋友应该猜到了，是因为上盒子和下盒子没给高度导致现在只能看见中间那栏，咱们给个高度再来看看:
```html
```
> `DOM` 结构只是示意，真实布局时要把 `parent` 和 `child` 换成你想要的元素，如：``
```css
parent {
display: grid;
grid: var(--上下栏);
}
child1 {
height: 80px;
}
child2 {
overflow-y: auto;
}
child3 {
height: 100px;
}
```
运行结果：
还可以通过 `gap` 属性来控制间距:
```css
parent {
display: grid;
grid: var(--上下栏);
gap: 10px;
}
child1 {
height: 80px;
}
child2 {
overflow-y: auto;
}
child3 {
height: 100px;
}
```
运行结果：
也可以通过指定子元素的 `grid-area` 属性来颠倒 `DOM` 位置:
```css
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` 结构：
```html
```
> `DOM` 结构只是示意，真实布局时要把 `parent` 和 `child` 换成你想要的元素，如：``
```css
parent {
display: grid;
grid: var(--四宫格);
}
```
如果不想各个宫格紧贴在一起，可以用 `gap` 属性来控制间距：
```css
parent {
display: grid;
grid: var(--四宫格);
gap: 10px;
}
```
运行结果：
grid: var(--四宫格);
`gap` 属性是控制行和列之间间距的，但如果你想要行间距和列间距不一样的话，就要用到下面两个属性了：
● `row-gap`：行与行之间的间距
● `column-gap`：列与列之间的间距
也可以通过 `grid-area` 属性来重新分配 `DOM` 元素的位置：
```html
child1 { grid-area: 左上; }
child2 { grid-area: 右上; }
child3 { grid-area: 左下; }
child4 { grid-area: 右下; }
```
运行结果：
## 六宫格
grid: var(--六宫格);
`DOM` 结构：
```html
```
> `DOM` 结构只是示意，真实布局时要把 `parent` 和 `child` 换成你想要的元素，如：``
```css
parent {
display: grid;
grid: var(--六宫格);
}
```
如果不想各个宫格紧贴在一起，可以用 `gap` 属性来控制间距：
```css
parent {
display: grid;
grid: var(--六宫格);
gap: 10px;
}
```
运行结果：
grid: var(--六宫格);
`gap` 属性是控制行和列之间间距的，但如果你想要行间距和列间距不一样的话，就要用到下面两个属性了：
● `row-gap`：行与行之间的间距
● `column-gap`：列与列之间的间距
也可以通过 `grid-area` 属性来重新分配 `DOM` 元素的位置：
```css
child1 { grid-area: 左上; }
child2 { grid-area: 右上; }
child3 { grid-area: 左下; }
child4 { grid-area: 右下; }
```
运行结果：
## 九宫格
grid: var(--九宫格);
`DOM` 结构：
```html
```
`DOM` 结构只是示意，真实布局时要把 `parent` 和 `child` 换成你想要的元素，如：``
```css
parent {
display: grid;
grid: var(--九宫格);
}
```
如果不想各个宫格紧贴在一起，可以用 `gap` 属性来控制间距：
```css
parent {
display: grid;
grid: var(--九宫格);
gap: 10px;
}
```
运行结果：
`gap` 属性是控制行和列之间间距的，但如果你想要行间距和列间距不一样的话，就要用到下面两个属性了：
● `row-gap`：行与行之间的间距
● `column-gap`：列与列之间的间距
也可以通过 `grid-area` 属性来重新分配 `DOM` 元素的位置：
```css
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` 结构：
```html
```
`DOM` 结构只是示意，真实布局时要把 `parent` 和 `child` 换成你想要的元素，如：``
```css
parent {
display: grid;
gird: var(--铺满);
}
```
## 圣杯
grid: var(--圣杯);
`DOM` 结构：
```html
```
`DOM` 结构只是示意，真实布局时要把 `parent` 和 `child` 换成你想要的元素，如：``
圣杯布局的子元素必须指定位置：
```css
parent {
display: grid;
grid: var(--圣杯);
}
child1 { grid-area: 上; }
child2 { grid-area: 左; }
child3 { grid-area: 中; }
child4 { grid-area: 右; }
child5 { grid-area: 下; }
```
但是看起来并没有看到圣杯布局的影子，灰蒙蒙的一片，还是那个原因，把上下左右的宽高控制权都留给用户，如果子元素里没有任何内容并且没有指定宽高的话就不会显示在屏幕上，我们来给个合适的宽高再看看：
```css
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: 下;
}
```
运行结果：
再给个间距看看效果：
```css
parent {
display: grid;
grid: var(--圣杯);
gap: 10px;
}
```
运行结果：
不给宽高只靠子元素的内容撑起来也可以，而且可以缺少某一个 `DOM` 元素，比如我们不想要"右"了：
```html
```
`DOM` 结构只是示意，真实布局时要把 `parent` 和 `child` 换成你想要的元素，如：``
```css
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` 来控制间距：
```css
parent > child {
margin: 10px;
}
```
运行结果：
即使不给"中"设置宽高，"中"也会根据父元素的宽高来自动调整自己的宽高大小。
也可以靠 `row-gap` 和 `column-gap` 属性来单独控制横、纵间距：
## 双飞翼
grid: var(--双飞翼);
`DOM` 结构：
```html
```
`DOM` 结构只是示意，真实布局时要把 `parent` 和 `child` 换成你想要的元素，如：``
双飞翼布局的子元素必须指定位置：
```css
parent {
display: grid;
grid: var(--双飞翼);
}
child1 { grid-area: 上; }
child2 { grid-area: 左; }
child3 { grid-area: 中; }
child4 { grid-area: 右; }
child5 { grid-area: 下; }
```
但是看起来并没有看到双飞翼布局的影子，灰蒙蒙的一片，还是那个原因，把上下左右的宽高控制权都留给用户，如果子元素里没有任何内容并且没有指定宽高的话就不会显示在屏幕上，我们来给个合适的宽高再看看：
```css
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: 下;
}
```
运行结果：
再给个间距看看效果：
```css
parent {
display: grid;
grid: var(--双飞翼);
gap: 10px;
}
```
运行结果：
不给宽高只靠子元素的内容撑起来也可以，而且可以缺少某一个 `DOM` 元素，比如我们不想要"右"了：
```html
```
`DOM` 结构只是示意，真实布局时要把 `parent` 和 `child` 换成你想要的元素，如：``
```css
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` 来控制间距：
```css
parent > child {
margin: 10px;
}
```
运行结果：
即使不给"中"设置宽高，"中"也会根据父元素的宽高来自动调整自己的宽高大小。
也可以靠 `row-gap` 和 `column-gap` 属性来单独控制横、纵间距：
## 响应式
grid: var(--响应式);
响应式布局会根据父元素的大小以及子元素的数量来自行决定如何排版
DOM 结构:
```html
......
```
`DOM` 结构只是示意，真实布局时要把 `parent` 和 `child` 换成你想要的元素，如：``
```css
parent {
display: grid;
grid: var(--响应式);
}
```
不过每列的最小宽度默认是`100px`，如果想改变这一大小的话需要在 `:root` 选择器上定义一个 `--宽` 变量，比如想要宽变成`30px`：
```css
:root {
--宽: 30px;
}
```
如果每个子元素之间的距离太近了的话别忘记用 `gap` 属性来控制间距哦：
```css
parent {
display: grid;
grid: var(--响应式);
gap: 10px;
}
```
---
_Source: https://npm.io/package/chinese-layouts · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._