CSS前端知识 Grid布局方式

Grid布局 针对的是子元素布局。

1：形成一个网格结构(父元素添加)：
    display:grid;

2: 划分行和列
    grid-template-columns:
    grid-template-rows:

    如果是3个值 代表3行或3列 能接受具体的px 也能是百分比


    划分行和列的时候的关键字 和 方法:

    a:    repeat(重复的次数,重复的值)


    b:    auto-fill关键字( 自动填充 )

    
    c:    fr关键字(列宽片段)


    d:    minmax(最小值,最大值)


3:  grid-gap:20px 30px;  简写形式


4:  指定某个项目所在的区域:
    grid-template-areas:
                    'a a a'
				    '. . b'
				    '. c c';
    

    注:  grid-template-areas  必须和 grid-area共同使用
            grid-area放在具体某个项目里面的,指定项目名称.


5:指定顺序:
    grid-auto-flow:row/column


6: 内容在项目里面的对齐方式:
    place-items:

    注: 网格内部的内容固定的大小 百分比的时候 左右的对齐方式会产生BUG


7: place-content:;  控制整个网格在父元素里面的对齐方式.