最新想要实现一个不规则布局，通过查找，发现了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; }