Grid布局

一．容器属性：

（1）grid-template

         ①grid-template-columns  (列)

         ②grid-template-rows  (行)

注：想要多少行多少列，就填写相应的属性值的个数，不填写，自动分配

例：㈠grid-template-rows:100px  100px  100px；

       ㈡grid-template-rows:repeat(3,100px)；

（2）auto-fill有的单元格大小是固定的，但是容器大小不固定，它会自动填充

 例：grid-template-rows:repeat(auto-fill.100px)

（3）fr,为了方便表示比例关系

例：㈠grid-template-columns:repeat(4.1fr)

       ㈡grid-template-columns:1fr  2fr

(4)min max( ) ,函数产生一个长度范围，表示长度在这个范围中，分别为最小和最大

例：grid-template-columns:1fr  minmax(150px,1fr)

(5)auto,表示浏览器自己决定长度

例：grid-template-columns:100px auto 100px;

(6)网格线，可以用方括号定义网格线名称，方便给盒子定位用

例:grid-template-columns: [c1] 100px  [c2] 100px  [c3] 100px

2.grid-gap 

                  ①grid-column-gap（列）

                   ②grid-row-gad（行）

     item(项目)相互之间的间距

3.grid-template-areas:一个区域由单个或多个单元格组成

例：㈠grid-template-areas:‘a b c’

                                            ‘d e f’

                                             ‘g h I’

       ㈡grid-template-areas:‘a a a ’

                                           ‘b b b ’

                                            ‘c c c ’

       ㈢grid-template-areas:‘a.c’

                                            ‘d.f’

                                            ‘g  I’

因区域不需要利用，则用.代替

区域命名会影响网格线，每个区域起始线改为-start，终止线改为-end

4.grid-auto-flow

划分网格线以后，容器子元素会按顺序，自动放在每一个网格，

顺序：先行后列即填满第一行再开始第二行

属性值①row

           ②row  dense:换行时留下的空间由下面元素填补上

5.jutify-items(水平方向)/align-items(垂直方向)：设置单元格内容的对齐方式

属性值①start

           ②end

           ③center

           ④stretch

6.justify-content (水平)/align-content   （垂直）

  设置整个内容区域（所有的项目的总和）的对齐方式

属性值①start

           ②end

           ③center 

           ④stretch 

           ⑤space-around

          ⑥space-bentween 

          ⑦space-even/evenly

                                 align-content

7.grid-auto-colusmns

   grid-auto-rows

   属性用于设置网格容器中列/行的默认大小

二．项目属性：

1．①grid-columns-start 

     ②grid-columns-end

     ③grid-row-start

    ④grid-row-end

用来指定项目的具体位置，根据在哪根网格线

例：㈠grid-columns-star:1              简写：grid-columns:1/3;

       ㈡grid-columns-end:3

2.grid-area:指定项目放在一个区域

例：grid-template-areas:‘a a a ’

                                        ‘b b b’

                                        ‘c c c’

grid-area:b;                   

3.①jusify-self 设置单元格位置，只作用于单个项目（水平）

  ②align-self设置单元格位置，只作用于单个项目（垂直）

  ③place-self   jusify-self和align-self的合写

属性值①start

          ②end

          ③center

           ④stretch

例：㈠jusify-self:center

       ㈡align-self:center

       ㈢place-self:center   cent