使用

dispaly: grid; 默认只有一列
grid-template-columns: 100px 100px;

这里写了两列每一列的宽度是100px
如果列数比较多的话可以使用repeat_link repeat函数如 grid-template-columns: repeat(5, 70px); 就相当于写了5个70px
新单位：fr 英文：fraction 一部分的意思,假如定义了grid的元素的宽度是700px，我想写成7列相同的宽度的表格，但是又不想计算的话可以使用 grid-template-columns: repeat(7, 1fr) 相当于7*X=700那么1fr就等于100px等价类推 X+X+X = 父元素宽度

grid-template-rows: 90px 80px 设定第一列高为90px第二列高为80px 使用和 grid-template-columns 一致
grid-auto-rows: 100px; 在某一列的grid-template-rows属性没有对应的值的时候使用这个值作为垫底的默认值 grid-template-rows 的优先级是比较高的
auto-fill 自动填充，如果上一行的元素还有足够的位置就会移动到上一行。grid-template-columns: repeat(auto-fill, 100px); 这里的效果就是，每一个列给100px如果上一行有足够的空间，就移动到上一行
minmax(60px, 200px) 设定最大值和最小值 grid-template-columns: repeat(auto-fill, minmax(60px, 200px));：每一列最小60px最大200px，上一行有位置就往上一行移动
row-gap: 3px; 行间隙为3px
column-gap: 8px;列间隙为8px
gap: 19px 8px; 列间隙19px 行间隙8px

10. 配合上个图我们能够容易与grid-column-start: 1; grid-column-end: 3; grid-row-start: 1; grid-row-end: 3; 配合描绘出一个占据2行2列的元素。也有简写的形式。例如 grid-row: 2/3 这种情况下跨度是1还能继续简写为 grid-row: 2 既：grid-row: 2/3 等价于grid-row: 2

#demo {
      grid-row: 1/3;
      grid-column: 1/3;
}

等价于

#demo {
    grid-column-start: 1;
    grid-column-end: 3;
    grid-row-start: 1;
    grid-row-end: 3;
}

11. 可以写得更加语意义化一点，给不同的区域通过grid-area赋予名字，然后通过 grid-template-areas进行摆放

 footer {
     grid-area: footer 
 }
 .container {
     grid-template-areas: {
         "header header"
         "siderbar contain"
         "footer footer"
     }
 }
这样就完成了一个页面的整体布局 
如果某一列不想放置元素填写一个点站位就好
 .container {
     grid-template-areas: {
         "header ."
         "siderbar contain"
         "footer footer"
     }
 }
 这样header就只会占据一个表格

表格布局

使用