设置单元格之间的间距

设置行间距

 grid-row-gap: 60px; 

表示，行和行之间的间距为60px。

设置列间距

grid-column-gap: 60px;

表示，列和列之间的间距为60px。

复合写法

grid-gap: 20px 50px; 

规划子元素排列的方向

 grid-auto-flow: column | row;

column表示纵向排列，row表示横向排列，默认使用row

内容在单元格内的对齐方式

水平对齐方式

justify-items: start | end | center | stretch; 

• 如果项目没有设置宽和高，默认使用stretch，如果项目设置了宽和高，默认使用start，因为设置了宽和高以后，stretch将不生效。

  start：居左

  end：居右

  center：居中

  stretch：拉伸

   

垂直对齐方式

 align-items: start | end | center | stretch;

•  如果项目没有设置宽和高，默认使用stretch，如果项目设置了宽和高，默认使用start，因为设置了宽和高以后，stretch将不生效。

  start：居上

  end：居下

  center：居中

  stretch：拉伸

复合写法

 place-item:垂直对齐方式 水平对齐方式;

网格在容器中的对齐方式 

start - 对齐容器的起始边框。

end - 对齐容器的结束边框。

center - 容器内部居中。

stretch - 项目大小没有指定时，拉伸占据整个网格容器。

space-around - 每个项目两侧的间隔相等。所以，项目之间的间隔比项目与容器边框的间隔大一倍。

space-between - 项目与项目的间隔相等，项目与容器边框之间没有间隔。

pace-evenly - 项目与项目的间隔相等，项目与容器边框之间也是同样长度的间隔。

水平对齐方式

 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:  垂直对齐方式 水平对齐方式 

指定网格线名称

grid-template-columns: [c1] 100px [c2] 100px [c3] auto [c4];
grid-template-rows: [r1] 100px [r2] 100px [r3] auto [r4]; 

指定网格布局为3行x3列，因此有4根垂直网格线和4根水平网格线。方括号里面依次是这八根线的名字。默认以1234来命名。

项目属性

grid-column-start: 开始的纵向网格线名称;
grid-column-end: 结束的纵向网格线名称;
grid-row-start: 开始的横向网格线名称;
grid-row-end: 结束的横向网格线名称;

grid-column-start属性：左边框所在的垂直网格线 grid-column-end属性：右边框所在的垂直网格线 grid-row-start属性：上边框所在的水平网格线 grid-row-end属性：下边框所在的水平网格线

 复合写法：

grid-column: grid-column-start网格线名称的值 / grid-column-end的值;
grid-row: grid-row-start的值 / grid-row-end的值; 

设置网格区域分配项目

 

1、给每个单元格命名，且通过名称将多个单元格进行合并

容器属性：

/* 将容器划分为9宫格 */
display: grid;
grid-template-rows: repeat(3, 100px);
grid-template-columns: repeat(3, 100px);
/* 给每个单元格命名 */
grid-template-areas: "a a c" 
                     "d e f" 
                     "g h i";
无用的名称可以给.来代替：
                     ". . ." 
                     "d e f" 
                     "g h i"; 

注意：相同的名称可以进行合并，但单元格合并后必须是一个长方形或正方形。

2、给项目设置要占据的区域名称

项目属性：

 grid-area:区域名称；

指定当前项目要占据的区域名称，区域名称不需要加引号。