功能函数 repeat(参数1，参数2) 功能函数 参数1 ：重复的次数 参数2 ：重复的数值或者重复的模式 例： grid-template-columns：repeat(3,33.33%) 等同 grid-template-columns：(33.33% 33.33% 33.33%) auto-fill 关键字( 自动填充 ) grid-template-columns:repeat(auto-fill,33.33%) ; grid-template-columns:repeat(auto-fill,100px) ; 当项目宽高固定时（容器不固定时）自动填充网格列数 fr关键字(列宽片段) 为了方便表示比例关系，网格布局提供了fr关键字（fraction 的缩写，意为"片段"）。如果两列的宽度分别为1fr和2fr，就表示后者是前者的两倍。 grid-template-columns: 1fr 3fr 1fr; grid-template-rows：repeat(3,100px) minmax() 函数产生一个长度范围，表示长度就在这个范围之中。它接受两个参数，分别为最小值和最大值。 grid-template-columns: 1fr 1fr minmax(100px, 1fr); 上面代码中，minmax(100px, 1fr)表示列宽不小于100px，不大于1fr。(父元素宽度自适应时适用) auto 关键字 自动填充 auto关键字表示由浏览器自己决定长度。 grid-template-columns:30px auto 20px; grid-template-rows：repeat(3,100px); 3. 设置行间距 || 列间距 grid-row-gap:20px /* 行间距 */ grid-column-gap:20px /* 列间距 */ grid-gap:30px 30px /* 复合式写法 */ /*注：新版本已经省略 grid- 前缀 row-gap \ column-gap \ gap*/
4. 指定"区域"（area），一个区域由单个或多个单元格组成。 display: grid; grid-template-columns: 100px 100px 100px; grid-template-rows: 100px 100px 100px; grid-template-areas: ‘a b c’ ‘d e f’ 'g h i’ 上面代码先划分出9个单元格，然后将其定名为a到i的九个区域，分别对应这九个单元格 通过grid-area指定项目名称 多个单元格合并成一个区域的写法如下。 grid-template-areas: ‘a a a’ ‘b b b’ ‘c c c’; 上面代码将9个单元格分成a、b、c三个区域。 display: grid; grid-template-columns: 100px 100px 100px; grid-template-rows: 100px 100px 100px; grid-template-areas: ‘a a a’ ‘. . b’ ‘. c c’ 如果某些区域不需要利用，则使用"点"（.）表示。 5. 规划子元素放置的顺序（默认为先排行后排列） grid-auto-flow: column | row; /* row dense和column dense。 这两个值主要用于，某些项目指定位置以后，剩下的项目怎么自动放置。 / 6.设置单元格内容在单元格内 水平 | 垂直 的对齐方式 justify-items: start | end | center | stretch; align-items: start | end | center | stretch; place-items: <justify-items> <align-items> /复合式写法/ / start：对齐单元格的起始边缘。 end：对齐单元格的结束边缘。 center：单元格内部居中。 stretch：拉伸，占满单元格的整个宽度（默认值）。 / 7. 设置整个内容区域在容器里面的水平 | 垂直 对齐方式 justify-content:start | end | center | stretch | space-around | space-between | space-evenly; align-content: start | end | center | stretch | space-around | space-between | space-evenly; place-content: <justify-content> <align-content> / 复合式写法 / / start - 对齐容器的起始边框。 end - 对齐容器的结束边框。 center - 容器内部居中。 stretch - 项目大小没有指定时，拉伸占据整个网格容器。 space-around - 每个项目两侧的间隔相等。所以，项目之间的间隔比项目与容器边框的间隔大一倍。 space-between - 项目与项目的间隔相等，项目与容器边框之间没有间隔。 pace-evenly - 项目与项目的间隔相等，项目与容器边框之间也是同样长度的间隔。 */ 8. 项目属性：添加在子元素上面
