display: grid 实现不规则布局

最新想要实现一个不规则布局，经过查找，发现了display：grid 这个属性。

1，基本介绍

grid 是一个CSS简写属性，可以用来设置以下属性：
显式网格属性 grid-template-rows、grid-template-columns 和 grid-template-areas，
隐式网格属性 grid-auto-rows、grid-auto-columns 和 grid-auto-flow，
间距属性 grid-column-gap (en-US) 和 grid-row-gap (en-US)。

常用的属性：grid-template-rows、grid-template-columns 和 grid-template-areas。
间距属性：grid-gap 是grid-column-gap 和 grid-row-gap 的合并简写。

2，快速使用

2.1，HTML代码

<div class="parent">
   <div v-for="(item,index) in 23" :key="index" :class="`div${index +1} divBorder`">
         DIV {{index+1}}
   </div>
</div>

2.2, 设置 display: grid;
grid-template-rows: repeat(auto-fill, 1fr); 表示，自动填充行数，行的高度为1 fr。
grid-template-columns: repeat(14,1fr); 表示，占据14列 ，列的宽度为1 fr。
grid-gap: 15px; 表示，每个格子的行和列的间距为15px。
grid-template-areas： 表示，想要设置的布局。in1~10可以随意更改名称。

.parent {
    --gridTemplateColumns: 14;
    grid-template-areas:
        ". . in3 in3 in3 . . . .in7 in7 . in9 in9"
        ". . in3 in3 in3 in5 in5 in5 . in7 in7 . in9 in9"
        "in1 in1 in3 in3 in3 in5 in5 in5 . . in8 in8 . ."
        "in1 in1 . . .in5 in5 in5 . .in8 in8 in10 in10"
        "in2 in2 . in4 in4 . . . in6 in6 . . in10 in10"
        "in2 in2 . in4 in4 . . . in6 in6 . . . .";
}
.parent {
    height: 800px;
    display: grid;
    grid-template-rows: repeat(auto-fill, 1fr);
    grid-gap: 15px;
    grid-template-columns: repeat(14,1fr);
}
.div1 {grid-area: in1/in1/in1/in1 ; background-color: rgb(228, 161, 15);}
.div2 { grid-area: in2/in2/in2/in2 ; background-color: rgb(30, 138, 132);}
.div3 { grid-area: in3/in3/in3/in3 ; background-color: rgb(145, 51, 51);}
.div4 { grid-area: in4/in4/in4/in4 ; background-color: rgb(179, 199, 105);}
.div5 { grid-area: in5/in5/in5/in5 ; background-color: rgb(199, 174, 105);}
.div6 { grid-area: in6/in6/in6/in6 ; background-color: rgb(105, 199, 136);}
.div7 { grid-area: in7/in7/in7/in7 ; background-color: rgb(122, 105, 199);}
.div8 { grid-area: in8/in8/in8/in8 ; background-color: rgb(105, 199, 136);}
.div9 { grid-area: in9/in9/in9/in9 ; background-color: rgb(197, 199, 105);}
.div10 { grid-area: in10/in10/in10/in10 ; background-color: rgb(197, 199, 105);}

最后效果如下：

---

在查阅的时候，发现了有意思的网站，可以快速生成grid 代码。
链接附上：CSS Grid Generator
他的列数，是 <input id="number" type="number"> 可选的值最大12，但可以通过手动输入的方式，输入你想要的列数。
生成的 css 样式如下：

.parent {
display: grid;
grid-template-columns: repeat(17, 1fr);
grid-template-rows: repeat(8, 1fr);
grid-column-gap: 0px;
grid-row-gap: 0px;
}

.div1 { grid-area: 1 / 4 / 2 / 5; }
.div2 { grid-area: 3 / 5 / 4 / 6; }
.div3 { grid-area: 5 / 6 / 6 / 7; }
.div4 { grid-area: 6 / 5 / 7 / 6; }
.div5 { grid-area: 7 / 8 / 8 / 9; }
.div6 { grid-area: 4 / 9 / 5 / 10; }
.div7 { grid-area: 3 / 11 / 4 / 13; }
.div8 { grid-area: 5 / 12 / 7 / 13; }
.div9 { grid-area: 7 / 12 / 8 / 13; }