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