2.2，设置显示：grid;grid-template-rows:repeat(auto-fill,1fr);表示，自动填充行数，row高度为1fr。网格模板列：重复（14,1fr）；表示占14列，列宽为1fr。网格间隙：15px；表示每个格子的行列间距为15px。grid-template-areas：表示要设置的布局。in1~10可以随意改名。.parent{--gridTemplateColumns:14;grid-template-areas:"..in3in3in3...in7in7.in9in9""..in3in3in3in3in5in5in5.in7in7.in9in9""in1in1in3in3in3in5in5in5..in8在8..”"in1in1...in5in5in5..in8in8in10in10""in2in2.in4in4......in6in6......in10in10""in2in2.in4in4......in6in6......";}.parent{高度：800px；显示：网格；网格模板行：重复（自动填充，1fr）；网格间隙：15px；grid-template-columns:repeat(14,1fr);}.div1{grid-area:in1/in1/in1/in1;背景颜色：rgb(228,161,15);}.div2{网格区域：in2/in2/in2/in2;背景颜色：rgb(30,138,132);}.div3{网格区域：in3/in3/in3/in3;背景颜色：rgb(145,51,51);}.div4{网格区域：in4/in4/in4/in4;背景颜色：rgb(179,199,105);}.div5{网格区域：in5/in5/in5/in5;背景颜色：rgb(199,174,105);}.div6{网格区域：in6/in6/in6/in6;背景-颜色：rgb(105,199,136);}.div7{网格区域：in7/in7/in7/in7;背景颜色：rgb(122,105,199);}.div8{网格区域：in8/in8/in8/in8;背景颜色：rgb(105,199,136);}.div9{网格区域：in9/in9/in9/in9;背景色：rgb(197,199,105);}.div10{网格区域：in10/in10/in10/in10;background-color:rgb(197,199,105);}最终效果如下：查的时候发现一个有意思的网站，可以快速生成网格代码链接上图：CSSGridGenerator的列数为。最大可选值为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{网格区域:1/4/2/5;}.div2{网格区域：3/5/4/6;}.div3{网格区域：5/6/6/7;}.div4{网格区域：6/5/7/6;}.div5{网格区域：7/8/8/9;}.div6{网格区域：4/9/5/10;}.div7{网格面积：3/11/4/13;}.div8{网格面积：5/12/7/13;}.div9{网格区域：7/12/8/13;}