寒假学习记录11：grid布局

1.

display:grid

2.

grid-template-columns: 100px 100px 100px  //指定每列的宽度
grid-template-rows: 100px 100px 100px    //指定每行的宽度

3.

column-gap: 24px    //列间距
row-gap: 24px    //行间距
gap: 24px    //都设置

4.grid-template-areas用法

效果

        

5.

        align和justify和flex一样

6.

        grid特有的浮动单位：fr

        长度为   当前fr / 总fr