grid布局

实现同时对行和列的控制

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(两端对齐）