网格布局

grid布局 ：针对的是子元素布局。

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

        display:grid;

2: 划分行和列

        grid-template-columns:

        grid-template-rows:

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

 

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

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

 

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

 

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

 

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

 

4:  grid-row-gap:20px        行间距 

    grid-column-gap:20px  列间距 

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

 

5:  指定某个项目所在的区域:

        grid-template-areas:

                        'a a a'

                        '. . b'

                        '. c c';

 注:  grid-template-areas  必须和 grid-area共同使用

        grid-area放在具体某个项目里面的,指定项目名称.

6:指定顺序:

        grid-auto-flow:row/column

7: 内容在项目里面的对齐方式:

①justify-items: start | end | center | stretch;
②align-items: start | end | center | stretch;

③place-items:

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

8：

①justify-content:start | end | center | stretch | space-around | space-between | space-evenly;

②align-content: start | end | center | stretch | space-around | space-between | space-evenly;

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

9：指定项目的四个边框，分别定位在哪根网格线。

grid-column属性是grid-column-start和grid-column-end的合并简写形式
grid-row属性是grid-row-start属性和grid-row-end的合并简写形式。