实现同时对行和列的控制
1.指定每列的宽度
.grid{displaya;grind;
grid-template-colums:100px 100px 100px;
}
2.用fr指定浮动宽度（fr是grid布局专有单位，类似于对整个盒子的宽度进行平等划分，1fr就是占一份）
.grid{
display-template-colums:1fr 1fr 1fr;
}
补充属性：row-gap:行间距
column-gap:列间距
gap：统一设置
排列元素用grid-template-arears,例如。
现在标签里面进行布局grid-template-areas: 再在css里指定区域header{grid-area:header;} main{grid-area:content;} aside{grid-area:sidebar;} footer{grid-area:footer;}
"header header haeder"
"sidebar content content"
"footer footer footer"
补充属性：子元素在垂直方向上的对齐align-items:center/end
水平方向上的对齐justify-items:center/end/space-between(两端对齐）
如果行轨道和列轨道小于这个容器（就是grid整个布局小于包裹grid布局的盒子）
在垂直方向上对轨道进行对齐align-content:center/end
水平方向justify-content:center/end/space-between(两端对齐）