grid布局总结

容器属性
grid-template-rows gird-template-columns grid-template-areas
grid-auto-rows grid-auto-columns gird-auto-flow   grid-column-gap grid-row-gap   justify-items align-items justify-content align-content
grid-template: 简写 grid columns, rows, and areas. grid-gap: 简写 grid 简写 所有属性
常用简写:

grid-template: auto 1fr / auto 1fr auto;
grid-template: [linename] 100px / [columnname1] 30% [columnname2] 70%;
grid-template: 
            "a a ." minmax(50px, auto)
            "a a ." 80px
            "b b c" auto / 2em 3em auto;


grid: repeat(2, 60px) / auto-flow 80px;

  子项属性   grid-row gird-column grid-area   justify-self align-self
gird-row-start grid-row-end grid-column-start grid-column-end

详细用法参考：

Grid布局指南 Grid布局方案