display: grid 实现不规则布局 css

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

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); }

最后效果如下：

文章图片

【display: grid 实现不规则布局】在查阅的时候，发现了有意思的网站，可以快速生成grid 代码。
链接附上：CSS Grid Generator
他的列数，是可选的值最大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; }