grid布局总结

容器属性
grid-template-rows gird-template-columns grid-template-areas
grid-auto-rows grid-auto-columns gird-auto-flow
grid-template: 简写 grid columns, rows, and areas. grid-gap: 简写 <row-gap> <column-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
gird-row-start grid-row-end grid-column-start grid-column-end

标签：总结,auto,布局,gird,grid,template,简写,row
来源： https://www.cnblogs.com/mengff/p/15701912.html