[TOC]

Node 生成模块化文件的小工具

**talk is cheap, show me the code

目的及用途

  1. 可以方便地自定义生成各种文件模板，可定制化，configs文件夹放入 .gitignore文件里
  2. 与脚手架不同，本地可以随便改，不会影响到团队成员开发
  3. 与vscode的代码片段不同，这种方法更快，而且，不用那么麻烦的格式

正常的vue快捷代码片段

  1. "Print to vueTemplate": {
  2.         "prefix": "vueTemplate",
  3.         "body": [
  4.           "<template>",
  5.           "  <div>",
  6.           "    $3",
  7.           "  </div>",
  8.           "</template>",
  9.           "<script>",
  10.           "export default {",
  11.           "  name:'$1',",
  12.           "  props: {",
  13.           "  },",
  14.           "  data() {",
  15.           "    return {",
  16.           "       $2",
  17.           "    }",
  18.           "  },",
  19.           "  created() {",
  20.           "  },",
  21.           "  mounted() {",
  22.           "  },",
  23.           "  methods: {",
  24.           "  }",
  25.           "}",
  26.           "</script>",
  27.           "<style scoped lang='less'>",
  28.           "</style>"
  29.         ],
  30.         "description": "vue 模板"
  31.       },

源码

add-module.js

  1. /**
  2.  * description: 根据模板文件，自动生成模块文件以及目录
  3.  * @author: taoxiaolin
  4.  * @create-date: 2019-12-08 23:19:27
  5.  * @version: V 1.0.0
  6. */
  8. // ---------------------- 变量定义 ----------------------
  10. const fs = require('fs');
  11. const path = require('path');
  12. const tplRender = require('json-templater/string');
  14. /*
  15. var render = require('json-templater/string');
  16. render('{{xfoo}} {{say.what}}', { xfoo: 'yep', say: { what: 'yep' } });
  17. // yep yep
  18. 注：{{xfoo}} 两侧不能出现空格 :(
  19. */
  21. // 接收输入的模块名
  22. const moduleName = process.argv[2];
  24. const OUTPUT_PATH = path.join(__dirname, `../game/${moduleName}`);
  25. // console.log('out', OUTPUT_PATH, '__dir', __dirname);
  27. // 目录
  28. const dirMap = {
  29.     'html': `../game/${moduleName}/`,
  30.     'js': `../game/${moduleName}/js/`,
  31.     'less': `../game/${moduleName}/css/`,
  32.     'img': `../game/${moduleName}/img/`
  33. };
  35. // 文件最终落地结构以及文件名
  36. const fileTargetMap = {
  37.     'html': `../game/${moduleName}/index.html`,
  38.     'js': `../game/${moduleName}/js/index.js`,
  39.     'less': `../game/${moduleName}/css/index.less`
  40. };
  42. // 引用的文件模板
  43. const tplMap = {
  44.     'html': require('./template/html-tpl.js'),
  45.     'js': require('./template/js-tpl.js'),
  46.     'less': require('./template/less-tpl.js')
  47. };
  49. // 需要渲染变量的模块
  50. const needRenderTpl = {
  51.     'html': {
  52.         moduleName
  53.     },
  54.     'store': {
  55.         moduleName
  56.     }
  57. };
  59. // render示例，如果模板内不需要解析变量的话，就不需要这一步
  60. // const htmlStr = tplRender(htmlTpl, { moduleName });
  62. // 检测是否存在同名的 module
  63. if (fs.existsSync(OUTPUT_PATH)) {
  64.     console.error(`${moduleName}已存在！`);
  65.     return;
  66. }
  67. // ---------------------- 函数定义 ----------------------
  69. // 开始创建文件以及文件夹
  70. /**
  71.  * @function: 异步方式
  72.  * @description: 递归创建文件夹
  73.  * @author: taoixaolin
  74. */
  76. // function mkdirs(dirname, callback) {
  77. //     fs.exists(dirname, (exists) => {
  78. //         if (exists) {
  79. //             callback();
  80. //         } else {
  81. //             mkdirs(path.dirname(dirname), () => {
  82. //                 fs.mkdir(dirname, callback);
  83. //             });
  84. //         }
  85. //     });
  86. // }
  88. // 开始创建文件以及文件夹
  89. /**
  90.  * @function: 同步
  91.  * @description: 递归创建文件夹
  92.  * @author: taoixaolin
  93. */
  94. function mkdirsSync(dirname) {
  95.     // console.log('mulu: ', mkdirsSync(path.dirname(dirname)));
  96.     if (fs.existsSync(dirname)) {
  97.         return true;
  98.     } else {
  99.         if (mkdirsSync(path.dirname(dirname))) {
  100.             fs.mkdirSync(dirname);
  101.             return true;
  102.         }
  103.     }
  104. }
  106. function createModule() {
  107.     // 先建总目录，再建分目录
  108.     mkdirsSync(OUTPUT_PATH);
  110.     // 创建目录
  111.     Object.keys(dirMap).forEach((key) => {
  112.         const folder = path.join(__dirname, dirMap[key]);
  113.         mkdirsSync(folder);
  114.     });
  116.     // 创建文件
  117.     Object.keys(fileTargetMap).forEach((key) => {
  118.         const outPath = path.join(__dirname, fileTargetMap[key]);
  119.         let fileTarget = '';
  121.         // 如果需要传参数，遍历一下，然后渲染
  122.         if (needRenderTpl[key]) {
  123.             const tempObj = {};
  124.             Object.keys(needRenderTpl[key]).forEach((key2) => {
  125.                 tempObj[key2] = needRenderTpl[key][key2];
  126.             });
  127.             fileTarget = tplRender(tplMap[key], tempObj); // 带参数渲染
  128.         } else {
  129.             fileTarget = tplRender(tplMap[key], {}); // 不带参数
  130.         }
  131.         fs.writeFileSync(outPath, fileTarget); // 文件写入
  132.     });
  133. }
  135. // ---------------------- 执行 ----------------------
  137. createModule();

del-module.js

  1. const fs = require('fs');
  2. const path = require('path');
  3. // const rm = require('rimraf');
  5. const moduleName = process.argv[2];
  6. const DELETE_PATH = path.join(__dirname, `../game/${moduleName}`);
  8. function deleteAll(path) {
  9.     let files = [];
  10.     if (fs.existsSync(path)) {
  11.         files = fs.readdirSync(path);
  12.         files.forEach((file, index) => {
  13.             const currentPath = path + '/' + file;
  14.             if (fs.statSync(currentPath).isDirectory()) {
  15.                 deleteAll(currentPath); // 是目录则递归进入下一层
  16.             } else {
  17.                 fs.unlinkSync(currentPath); // 是文件则删除文件
  18.             }
  19.         });
  20.         fs.rmdirSync(path); // 文件完成之后，删除文件夹
  21.     } else {
  22.         throw new Error('目录不存在！');
  23.     }
  24. }
  26. deleteAll(DELETE_PATH);

Template 文件

  1. const htmlTpl =
  2. `<!DOCTYPE html>
  3. <html lang="en">
  5. <head>
  6.   <meta charset="UTF-8">
  7.   <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  8.   <meta name="robots" content="index,follow">
  9.   <meta content="telephone=no" name="format-detection">
  10.   <meta name="viewport"
  11.     content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">
  12.   <title>Document</title>
  13. </head>
  15. <body>
  16.   <div id="app" v-cloak>
  17.     {{moduleName}}
  18.   </div>
  19. </body>
  21. </html>
  22. `;
  24. module.exports = htmlTpl;
  1. const indexJsTpl =
  2. `import '../css/index.less';
  3. import Vue from 'vue/dist/vue.min';
  4. // ...还可以加很多很多
  5. new Vue({
  6.     el: '#app',
  7.     data: {},
  8.     mounted() {
  9.         console.log('args', wb.args);
  10.     },
  11.     methods: {
  12.     }
  13. });
  14. `;
  16. module.exports = indexJsTpl;

package.json 配置

  1.  "scripts": {
  2.     "add": "node src/config/add-module.js",
  3.     "del": "node src/config/del-module.js",
  4.  }
  6.  "devDependencies": {
  7.     "json-templater": "^1.2.0"
  8.   },

CSS Grid 布局推荐

本次分享 grid 将围绕三个问题来展开，即什么是CSS Grid? 它能做什么？为什么要推荐它？;-)

什么是CSS Grid?

gird 即格子的意思，它可以将一个容器划分成 行和列，组成一个个的格子，因此，可以看做是一个二维的布局，而我们经常用的 flex 布局，则是利用“轴线”进行布局，需要对容器指定 flex-direction(默认 row), 所以，flex 是一种一维布局

采用网格布局的区域，称为”容器”（container）。容器内部采用网格定位的子元素，称为”项目”（item）。

  1. <div>
  2.   <div>
  3.     <p>1</p>
  4.   </div>
  5.   <div>
  6.     <p>2</p>
  7.   </div>
  8.   <div>
  9.     <p>3</p>
  10.   </div>
  11. </div>

上面代码中，最外层的 <div> 就是容器，里面第一层的 <div> 是项目

注意：项目只能是容器的顶层子元素，不包含项目的子元素，比如上面代码的 <p> 元素就不是项目。Grid 布局只对项目生效。

两个重要的概念

单元格

行和列的交叉区域，称为”单元格”（cell）。

Xnip2019-12-12_08-19-06.jpg

网格线

划分网格的线，称为”网格线”（grid line）。水平网格线划分出行，垂直网格线划分出列。

Xnip2019-12-12_07-56-28.jpg

CSS Grid 能做什么？有哪些用处？

先介绍一些 grid 比较重要的属性吧

容器属性

display

display: grid 网格项目按行排列，网格项目占用整个容器的宽度。
display: inline-grid 网格项目按行排列, 网格项目宽度由自身宽度决定。

  1. display：grid ｜ inline-grid

grid-template-columns 和 grid-template-rows属性 （重要）

grid-template-columns: 属性定义每一列的列宽
grid-template-rows: 属性定义每一行的行高。

  1. #container{
  2.     display: grid;
  3.     grid-template-columns: 100px 100px 100px;
  4.     grid-template-rows: 100px 100px 100px;
  6.     // grid-template-columns: 33.33% 33.33% 33.33%;
  7.     // grid-template-rows: 33.33% 33.33% 33.33%;
  9.     .item {
  10.         font-size: 4em;
  11.         text-align: center;
  12.         border: 1px solid #e5e4e9;
  13.     }
  14. }

repeat() 函数

这个函数用的非常多， repeat() 接受两个参数，第一个参数是重复的次数，第二个参数是所要重复的值。

  1. // grid-template-rows: 100px 100px 100px;
  2. grid-template-rows: repeat(3, 100px);
  4. // repeat() 也可以重复某种模式，如下
  5. #container{
  6.   display: grid;
  7.   grid-template-columns: repeat(2, 100px 20px 80px);
  8.   grid-template-rows: repeat(3, 100px);
  9. }

fr 关键字

为了方便表示比例关系，网格布局提供了fr关键字（fraction 的缩写，意为”片段”）

  1. .container {
  2.   display: grid;
  3.   grid-template-columns: 150px 1fr 2fr;
  4. }

计算规则：

  1. grid-template-columns: 100px 25% 1fr 2fr;

单位fr和其它长度单位混合使用时，fr的计算基于其它单位分配后的剩余空间。
本例中，1fr = (容器宽度 - 100px - 容器宽度的25%) / 3

minmax() 函数

minmax() 函数产生一个长度范围，表示长度就在这个范围之中。它接受两个参数，分别为最小值和最大值。

  1. grid-template-columns: 1fr 1fr minmax(100px, 1fr); 
  2. // minmax(100px, 1fr)表示列宽不小于100px，不大于1fr

auto-fill 和 auto-fit

单元格的大小是固定的，但是容器的大小不确定。如果希望每一行（或每一列）容纳尽可能多的单元格，这时可以使用auto-fill关键字表示自动填充。

  1. grid-template-columns: repeat(12, minmax(250px, 1fr)); // 如果容器宽度不够，不会换行
  3. // 这样的话，如果行内剩下的空间不足以容纳另外一列时，已有的列能自动扩张占满一整行，不造成空间浪费。
  4. grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));

auto-fill 倾向于容纳更多的列，所以如果在满足宽度限制的前提下还有空间能容纳新列，那么它会暗中创建一些列来填充当前行。即使创建出来的列没有任何内容，但实际上还是占据了行的空间。

auto-fit 倾向于使用最少列数占满当前行空间，浏览器先是和 auto-fill 一样，暗中创建一些列来填充多出来的行空间，然后坍缩（collapse）这些列以便腾出空间让其余列扩张。

column-gap, row-gap，grid-gap 属性

用来设置间距，row-gap: 行间距 column-gap: 列间距

  1. grid-gap: <grid-row-gap> <grid-column-gap>; // 如果 grid-gap省略了第二个值，浏览器认为第二个值等于第一个值。

grid-template-areas 属性

网格布局允许指定”区域”（area），一个区域由单个或多个单元格组成。grid-template-areas属性用于定义区域。

  1. grid-template-areas: "header header header"
  2.                      "main main sidebar"
  3.                      "footer footer footer";
  5. .header {
  6.   grid-area: header;
  7. }
  8. ...

gird-auto-flow 属性

划分网格以后，容器的子元素会按照顺序，自动放置在每一个网格。默认的放置顺序是”先行后列”，即先填满第一行，再开始放入第二行，即下图数字的顺序。

  1. gird-auto-flow: row(默认) ｜ column; // 子元素排列方式
  3. grid-auto-flow: row dense; // 表示"先行后列"，并且尽可能紧密填满，尽量不出现空格。

justify-items 属性，align-items 属性，place-items 属性

justify-items 属性设置 单元格内容 的水平位置（左中右）
align-items 属性设置 单元格内容 的垂直位置（上中下）。

  1. .container {
  2.   justify-items: start | end | center | stretch;
  3.   align-items: start | end | center | stretch;
  4. }
  5. /*
  6. start：对齐单元格的起始边缘。
  7. end：对齐单元格的结束边缘。
  8. center：单元格内部居中。
  9. stretch：拉伸，占满单元格的整个宽度（默认值）。
  10. */

Xnip2019-12-12_16-42-31.jpg

justify-content 属性，align-content 属性，place-content 属性

justify-content属性是 整个内容区域 在容器里面的水平位置（左中右），
align-content属性是 整个内容区域 的垂直位置（上中下）。

  1. .container {
  2.   justify-content: start | end | center | stretch | space-around | space-between | space-evenly;
  3.   align-content: start | end | center | stretch | space-around | space-between | space-evenly;  
  4. }

Xnip2019-12-12_16-42-19.jpg

容器所有属性总览

  1. display
  2. grid-template-columns
  3. grid-template-rows
  4. grid-template-areas
  5. grid-template
  6. grid-column-gap
  7. grid-row-gap
  8. grid-gap
  9. justify-items
  10. align-items
  11. justify-content
  12. align-content
  13. grid-auto-columns
  14. grid-auto-rows
  15. grid-auto-flow
  16. grid

项目属性

grid-row-start, grid-row-end, grid-column-start, grid-column-end 属性

用网格线编号定位项目
Xnip2019-12-12_07-56-28.jpg

  1. grid-row-start:    2;
  2. grid-row-end:      3;
  3. grid-column-start: 2;
  4. grid-column-end:   3;

grid-row和grid-column属性

合并写法，减少代码量

  1. .item-1 {
  2.   grid-column-start: 1;
  3.   grid-column-end: 3;
  4.   grid-row-start: 1;
  5.   grid-row-end: 2;
  6. }
  8. /* 等同于 */
  9. .item-1 {
  10.   grid-column: 1 / 3;
  11.   grid-row: 1 / 2;
  12. }
  14. /* 等同于 */
  15. .item-1 {
  16.   background: #b03532;
  17.   grid-column: 1 / span 2;
  18.   grid-row: 1 / span 2;
  19. }
  21. // grid-area 总体简写
  22. .item {
  23.   grid-area: <row-start> / <column-start> / <row-end> / <column-end>;
  24. }

justify-self 属性，align-self 属性，place-self 属性

justify-self属性设置单元格内容的水平位置（左中右），跟justify-items属性的用法完全一致，但只作用于单个项目。
align-self属性设置单元格内容的垂直位置（上中下），跟align-items属性的用法完全一致，也是只作用于单个项目。

  1. .item {
  2.   justify-self: start | end | center | stretch;
  3.   align-self: start | end | center | stretch;
  4. }
  5. /*
  6. start：对齐单元格的起始边缘。
  7. end：对齐单元格的结束边缘。
  8. center：单元格内部居中。
  9. stretch：拉伸，占满单元格的整个宽度（默认值）。
  10. */

Xnip2019-12-12_16-59-10.jpg

项目所有属性总览

  1. grid-column-start
  2. grid-column-end
  3. grid-row-start
  4. grid-row-end
  5. grid-column
  6. grid-row
  7. grid-area
  8. justify-self
  9. align-self

常见布局

两栏布局

  1. // 两栏式布局只需要一行代码
  2. // 左列定宽，右列自适应
  3. .wrapper {
  4.   display: grid;
  5.   grid-template-columns: 100px auto;
  6.   // grid-template-columns: 100px 1fr;
  7. }
  9. // 右列定宽，左列自适应
  10. .wrapper {
  11.   display: grid;
  12.   grid-template-columns: auto 100px;
  13.   // grid-template-columns: 1fr 100px;
  14. }
  16. // 左/右不定宽，另一侧自适应
  17. .wrapper {
  18.   display: grid;
  19.   grid-template-columns: 1fr auto;
  20.   // grid-template-columns: auto 1fr;
  21. }

三栏布局

  1. 左列中列定宽，右列自适应

    1. grid-template-columns: 100px 200px auto;

  2. 左列右列定宽，中间自适应

    圣杯布局

    ```less

    parent {

    height: 600px; display: grid; grid-template-columns: 200px auto 200px; grid-template-rows: 60px auto 60px; grid-template-areas: 

    1.  "header header header" 
    2.  "leftside main rightside" 
    3.  "footer footer footer";

    }

  2. <a name="XNcmx"></a>
  3. #### 多列布局
  4. <a name="WXQzG"></a>
  5. ##### 九宫格
  6. ```less
  7. #parent {
  8.     width: 600px;
  9.     height: 600px;
  11.     display: grid;
  12.     grid-template-columns: repeat(3, 1fr);
  13.     grid-template-rows: repeat(3, 1fr);
  14. }

栅格系统
  1. // 12栏布局
  2. grid-template-columns: repeat(12, 1fr);
  4. // 24栏布局
  5. grid-template-columns: repeat(24, 1fr);

为什么推荐使用 CSS Grid?

与flex的对比

演示代码

Flex

  1. <div class="container-flex">
  2.     <div class="box box1">
  3.       <div class="item">1</div>
  4.     </div>
  6.     <div class="box box2">
  7.       <div class="item">1</div>
  8.       <div class="item">2</div>
  9.     </div>
  11.     <div class="box box3">
  12.       <div class="item">1</div>
  13.       <div class="item">2</div>
  14.       <div class="item">3</div>
  15.     </div>
  17.     <div class="box box4">
  18.       <div class="column">
  19.           <div class="item">1</div>
  20.           <div class="item">2</div>
  21.       </div>
  22.       <div class="column">
  23.           <div class="item">3</div>
  24.           <div class="item">4</div>
  25.       </div>
  26.     </div>
  28.     <div class="box box5">
  29.         <div class="column">
  30.             <div class="item">1</div>
  31.             <div class="item">2</div>
  32.         </div>
  33.         <div class="column">
  34.             <div class="item">3</div>
  35.         </div>
  36.         <div class="column">
  37.             <div class="item">4</div>
  38.             <div class="item">5</div>
  39.         </div>
  40.     </div>
  42.     <div class="box box6">
  43.         <div class="column">
  44.             <div class="item">1</div>
  45.             <div class="item">2</div>
  46.             <div class="item">3</div>
  47.         </div>
  48.         <div class="column">
  49.             <div class="item">4</div>
  50.             <div class="item">5</div>
  51.             <div class="item">6</div>
  52.         </div>
  53.     </div>
  55.     <div class="box box7">
  56.       <div class="item">1</div>
  57.       <div class="item">2</div>
  58.       <div class="item">3</div>
  59.       <div class="item">4</div>
  60.       <div class="item">5</div>
  61.       <div class="item">6</div>
  62.       <div class="item">7</div>
  63.     </div>
  65.     <div class="box box8">
  66.       <div class="item">1</div>
  67.       <div class="item">2</div>
  68.       <div class="item">3</div>
  69.       <div class="item">4</div>
  70.       <div class="item">5</div>
  71.       <div class="item">6</div>
  72.       <div class="item">7</div>
  73.       <div class="item">8</div>
  74.     </div>
  76.     <div class="box box9">
  77.       <div class="item">1</div>
  78.       <div class="item">2</div>
  79.       <div class="item">3</div>
  80.       <div class="item">4</div>
  81.       <div class="item">5</div>
  82.       <div class="item">6</div>
  83.       <div class="item">7</div>
  84.       <div class="item">8</div>
  85.       <div class="item">9</div>
  86.     </div>
  87.   </div>
  1. [v-cloak] {
  2.     display: none;
  3. }
  5. .container-common {
  6.     width: 640px;
  7.     height: 640px;
  8.     box-sizing: border-box;
  9.     padding: 5px;
  10.     background-color: #292929;
  11. }
  13. .container-flex {
  14.     .container-common;
  16.     display: flex;
  17.     flex-wrap: wrap;
  19.     .box {
  20.         width: 180px;
  21.         height: 180px;
  22.         margin: 15px;
  23.         background-color: #E7E7E7;
  24.         box-sizing: border-box;
  25.         display: flex;
  27.         .item {
  28.             width: 40px;
  29.             height: 40px;
  30.             border-radius: 50%;
  31.             background-color: #292929;
  32.             margin: 10px;
  34.             color: white;
  36.             display: flex;
  37.             justify-content: center;
  38.             align-items: center;
  39.         }
  40.     }
  42.     .box1 {
  43.         justify-content: center;
  44.         align-items: center;
  45.     }
  47.     .box2 {
  48.         justify-content: space-between;
  50.         .item:nth-child(2) {
  51.             align-self: flex-end;
  52.         }
  53.     }
  55.     .box3 {
  56.         .item:nth-child(2) {
  57.             align-self: center;
  58.         }
  60.         .item:nth-child(3) {
  61.             align-self: flex-end;
  62.         }
  63.     }
  65.     .box4 {
  66.         flex-wrap: wrap;
  67.         justify-content: space-between;
  69.         .column {
  70.             display: flex;
  71.             flex-direction: column;
  72.             justify-content: space-between;
  73.         }
  74.     }
  76.     .box5 {
  77.         flex-wrap: wrap;
  78.         justify-content: space-between;
  80.         .column {
  81.             display: flex;
  82.             flex-direction: column;
  83.             justify-content: space-between;
  84.         }
  85.         .column:nth-child(2) {
  86.             justify-content: center;
  87.         }
  88.     }
  90.     .box6 {
  91.         flex-wrap: wrap;
  92.         align-content: space-between;
  93.         justify-content: space-between;
  95.         .column {
  96.             display: flex;
  97.             flex-direction: column;
  99.         }
  100.     }
  102.     .box7 {
  103.         flex-wrap: wrap;
  104.     }
  106.     .box8 {
  107.         flex-wrap: wrap;
  108.     }
  110.     .box9 {
  111.         flex-wrap: wrap;
  112.     }
  113. }

Grid

  1. <div class="container-grid">
  2.     <div class="box box1">
  3.       <div class="item">1</div>
  4.     </div>
  6.     <div class="box box2">
  7.       <div class="item">1</div>
  8.       <div class="item">2</div>
  9.     </div>
  11.     <div class="box box3">
  12.       <div class="item">1</div>
  13.       <div class="item">2</div>
  14.       <div class="item">3</div>
  15.     </div>
  17.     <div class="box box4">
  18.       <div class="item">1</div>
  19.       <div class="item">2</div>
  20.       <div class="item">3</div>
  21.       <div class="item">4</div>
  22.     </div>
  24.     <div class="box box5">
  25.       <div class="item">1</div>
  26.       <div class="item">2</div>
  27.       <div class="item">3</div>
  28.       <div class="item">4</div>
  29.       <div class="item">5</div>
  30.     </div>
  32.     <div class="box box6">
  33.       <div class="item">1</div>
  34.       <div class="item">2</div>
  35.       <div class="item">3</div>
  36.       <div class="item">4</div>
  37.       <div class="item">5</div>
  38.       <div class="item">6</div>
  39.     </div>
  41.     <div class="box box7">
  42.       <div class="item">1</div>
  43.       <div class="item">2</div>
  44.       <div class="item">3</div>
  45.       <div class="item">4</div>
  46.       <div class="item">5</div>
  47.       <div class="item">6</div>
  48.       <div class="item">7</div>
  49.     </div>
  51.     <div class="box box8">
  52.       <div class="item">1</div>
  53.       <div class="item">2</div>
  54.       <div class="item">3</div>
  55.       <div class="item">4</div>
  56.       <div class="item">5</div>
  57.       <div class="item">6</div>
  58.       <div class="item">7</div>
  59.       <div class="item">8</div>
  60.     </div>
  62.     <div class="box box9">
  63.       <div class="item">1</div>
  64.       <div class="item">2</div>
  65.       <div class="item">3</div>
  66.       <div class="item">4</div>
  67.       <div class="item">5</div>
  68.       <div class="item">6</div>
  69.       <div class="item">7</div>
  70.       <div class="item">8</div>
  71.       <div class="item">9</div>
  72.     </div>
  73.   </div>
  1. [v-cloak] {
  2.     display: none;
  3. }
  5. .container-common {
  6.     width: 640px;
  7.     height: 640px;
  8.     box-sizing: border-box;
  9.     padding: 5px;
  10.     background-color: #292929;
  11. }
  13. .container-grid {
  14.     .container-common;
  16.     display: grid;
  17.     grid-template-rows: repeat(3, 1fr);
  18.     grid-template-columns: repeat(3, 1fr);
  20.     .box {
  21.         width: 180px;
  22.         height: 180px;
  23.         margin: 15px;
  24.         background-color: #E7E7E7;
  25.         box-sizing: border-box;
  26.         display: grid;
  28.         grid-template-rows: repeat(3, 1fr);
  29.         grid-template-columns: repeat(3, 1fr);
  30.         grid-template-areas: 'a b c'
  31.                              'd e f'
  32.                              'g h i';
  34.         .item {
  35.             width: 40px;
  36.             height: 40px;
  37.             border-radius: 50%;
  38.             background-color: #292929;
  39.             margin: 10px;
  40.             color: white;
  42.             display: flex;
  43.             justify-content: center;
  44.             align-items: center;
  45.         }
  46.     }
  48.     .box1 {
  49.         .item {
  50.             grid-area: e;
  51.         }
  52.     }
  54.     .box2 {
  55.         .item:nth-child(2) {
  56.             grid-area: c;
  57.         }
  58.     }
  60.     .box3 {
  61.         .item:nth-child(2) {
  62.             grid-area: e;
  63.         }
  64.         .item:nth-child(3) {
  65.             grid-area: i;
  66.         }
  67.     }
  69.     .box4 {
  71.     }
  73.     .box5 {
  75.     }
  77.     .box6 {
  78.         .item:nth-child(1) {
  79.             grid-area: a;
  80.         }
  81.         .item:nth-child(2) {
  82.             grid-area: c;
  83.         }
  84.         .item:nth-child(3) {
  85.             grid-area: g;
  86.         }
  88.         .item:nth-child(4) {
  89.             grid-area: d;
  90.         }
  91.         .item:nth-child(5) {
  92.             grid-area: f;
  93.         }
  94.         .item:nth-child(6) {
  95.             grid-area: i;
  96.         }
  97.     }
  99.     .box7 {
  101.     }
  103.     .box8 {
  105.     }
  107.     .box9 {
  109.     }
  110. }

需要注意的地方

浏览器对 css grid的适配情况

Xnip2019-12-11_01-32-08.jpg
(grid)

Xnip2019-12-11_20-05-20.jpg(flex)

学习链接

  1. http://www.ruanyifeng.com/blog/2019/03/grid-layout-tutorial.html
  2. http://topic.42du.cn/grid#grid-container
  3. https://www.caniuse.com/#search=display%3A%20grid
  4. https://cssgridgarden.com/#zh-cn
  5. http://flexboxfroggy.com/#zh-cn