关于css: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;}