七 栅格系统布局(Grid)

Posted 2021-03-06 qfshini

1. 什么是栅格布局？
    | 类似于最早的table(表单)布局一样，将一个盒子(div)可以划分为多少个行和列，进行内容填充
    | 注意：栅格系统虽然比较强大，但是兼容性很差，所以了解一下即可，当然你也可以根据项目需要选择

2. 容器的定义
    | display：grid; --> 定义栅格布局
    
    | grid-template-columns --> 定义行
        | 方式一：grid-template-cloumns:100px 100px;
            | --> 定义两行，每行(宽度)为100px
        | 方式二：grid-template-cloumns: repeat(2,50%);
            | --> 定义两行，每行(宽度)为父元素行(宽度)的50%

    | grid-template-row --> 定义列
        | grid-template-row:100px 100px;
            | --> 定义两列，每列(高度)为100px
        | grid-template-row: repeat(2,50%);
            | --> 定义两列，每列(高度)为父元素的50%