grid布局

一、什么是grid布局？

将容器划分为行和列，产生单元格，然后指定项目所在的单元格，可以看作是二维布局。主流浏览器基本兼容

二、基本概念

1、容器（有容器属性）

2、项目（有项目属性）

外层大盒子就是容器，里面具体的东西就是item

3、grid布局中所具有的东西（重要的图）

三、容器属性

1、grid-template-*  

eg：grid-template-columns：100px 100px 100px (表示三列)

        grid-template-rows：100px 100px 100px 100px (表示四行)

ps:想写多少行或多少列，就填写相应属性的个数。不填写就会自动分配，将容器自动充满。

跟grid-template相关的东西

1、repeat() 第一个参数是重复的次数，第二个是重复的值

eg ：grid-template-columns：100px 100px 100px

         grid-template-columns：repeat（3，100px）

2、auto-fill 有时，单元格的大小是固定的，但是容器的大小不确定，auto-fill属性就会自动填充 

eg：grid-template-rows：repeat（auto-fill，100px）

3、fr：方便表示比例关系 （fraction的缩写，片段的意思）

eg：grid-template-columns：repeat（4，1fr）//宽度平均分为四列等分

4、 minmax() 产生一个长度范围，2个参数，一个最小值，一个最大值

eg：grid-template-columns：1fr minmax（150px,1fr） 最小都不会小于150px

5、auto 表示由浏览器自己决定长度

eg：grid-template-columns：100px auto 100px  （不写则默认auto）

中间自动填充，根据浏览器的大小自动计算

6、网格线（作用：帮助定位 格子定位到哪跟线上）

n行有n+1跟水平网格线

m列有m+1跟垂直网格线
eg：grid-template-columns:[c1] 100px [c2] 100px [c3]    2列3跟网格线

2、grid-row-gap  /  grid-columns-gap

         item (格子/项目)之间的距离

eg：row-gap:20px  (行与行之间的距离)

        column-gap:20px  (列与列之间的距离)

简写：gap：20px 20px

3、grid-template-areas 

一个区域由单个或多个单元格组成 需要在项目属性里面设置】

每个单元格代表一个区域 （自己想怎么划分就怎么划分 一个格子可以成为一个区域 两个格子也可以成为一个区域）

4、grid-auto-flow

划分网格线以后，容器的子元素会按照顺序，自动放置在每一个网格。默认的放置顺序是先行后列，即填满第一行，再开始放入第二行（就是子元素的排放顺序）

eg：grid-auto-flow：row（先行后列  默认）

        grid-auto-flow：column （先列后行）

跟grid-auto-flow 相关  dense（提高空间的利用率）

5、对齐方式  justify-items(水平方向)  / align-items(垂直方向)

设置所有单元格内容的水平和垂直的对齐方式、

水平垂直合并写：place-items：center center

6、justify-content(水平方向) / align-content(垂直方向)

设置整个内容区域的水平和垂直对齐方式

eg：justify-content：center

       align-content：center

7、grid-auto-columns / grid-auto-rows 

用来设置多出来的项目的宽和高

四、项目属性

1、grid-column-start /  grid-column-end

     grid-row-start /  grid-row-end   用来指定item的具体位置

简写：eg1：grid-column：1 / 3   (第一个参数开始的位置 第二个参数结束的位置)

           eg2： grid-column-star：span 2；从开始方向跨越两个单元格

           eg3： grid-column-end：span 2；从结束方向跨越两个单元格

           eg2和eg3效果一样 一个往右一个往左

2、grid-area 指定项目在哪一个区域 （结合容器属性一起使用）

简写：grid-area：1 / 1 / 3 / 3

3、justify-self / align-self

只能用于单个项目（单元格）的水平/垂直方向

简写：place-self：center  center