奇妙的grid，css网格布局

    grid布局真的很强大，因为在自己的项目中使用最多的flex布局，导致grid使用的比较少。趁着空闲时重新把grid总结了一下。因为项目中很少使用自己只是简单的总结使用，但是按照css那种经常会给你出乎意料的布局情况grid绝对存在布局玄学的情况，最近没遇到等我之后遇到再更新到里面，现在只是简单的写下。最最最基础的东西了。。。

目录

一：概述

grid和flex的异同

二：基本概念

三： 容器属性

1：display：grid属性，指定容器采用网格布局

2：grid-template-columns(列宽)  grid-template-rows（行高）

（1）Repeat()

（2）auto-fill

（3）fr关键字：

（4）minmax()函数

（4）auto关键字

（5）网格线的名称[name]

3：grid-row-gap  grid-column-gap  grid-gap ：

4：grid-template-areas:

5：grid-auto-flow

6： justify-items

7：justify-content，align-content

8：grid-auto-columns,grid-auto-rows

四：项目属性

1： grid-column-start,grid-column-end，   Grid-row-start,grid-row-end

2：grid-area :指定区域

3:justify-self,align-self

---

一：概述

将网页划分为一个个的网格，任意组合不同的网格，做出各种布局

grid和flex的异同

相同：指定容器内部多个项目的位置

不同：flex指定项目针对轴线的位置是一维的。Grid将容器分成行和列，产生单元格，然后指定项目所在的单元格是二维布局。

二：基本概念

容器和项目，行列，单元格（cell），网格线（grid line）4x4的是5x5的网格线

属性类似flex布局，分为两类，一类定义在容器上面称为容器属性，另外一个是项目属性。

三： 容器属性

1：display：grid属性，指定容器采用网格布局

注：网格布局中项目的float,display:inline-block(table-cell),vertical-align和column-*等设置都将失效。

2：grid-template-columns(列宽)  grid-template-rows（行高）

单位也可以使用百分比

总结：当确定单元格位置的时候，根据上面的值就能定位到单元格单位是多少

（1）Repeat()

1. 写同样重复的值使用这个函数，简化重复的值，重复的次数和重复的值  

       grid-template-columns: repeat(3, 30px);  三个30px

       grid-template-columns: repeat(2, 30px 100px 20px) ; 后面的三个一轮询

（2）auto-fill

    关键字:容器里单元格充分填充

   grid-template-columns: repeat(auto-fill,100px);

    grid-template-rows: 40px;

    第一行的高度为40之后自动填充，不管除第一行之外的。

 

（3）fr关键字：

   1fr 和2fr 后者尺寸是前者的两倍

   grid-template-columns:150px 1fr 2fr;

   grid-template-rows: 50px 60px ;

   宽度未知，固定150px剩下的按上面写的比例进行展示

（4）minmax()函数

   长度在这个范围之内

   grid-template-columns:100px 1fr 2fr minmax(100px,200px)

   grid-template-rows: 50px 60px ;

   最后一列的数据在100到200之间。可以和fr配合自适应使用，范围的改变会导致fr单位的改变。

（4）auto关键字

    浏览器自己决定长度

    页面部分单位固定，auto部分自适应。存在多个auto，只有最开始的auto是自适应，其余的是被自身内部内容撑开的大小。

（5）网格线的名称[name]

3：grid-row-gap  grid-column-gap  grid-gap ：

设置行列间距

grid-gap: <grid-row-gap> <grid-column-gap>;

4：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 ';  a,b,c三个区域

当某个区域不用则使用‘.’表示

区域的命名影响网格线，自动命名为区域名-start（end）

 

5：grid-auto-flow

先行后列或者是先列后行。

grid-auto-flow: row dense;  充满区域（依次进行填满），见：grid-auto-flow文件示例

 

下面6，7的属性和flex布局相似

6： justify-items

设置单元格内容水平位置，align-items：设置单元格垂直位置

start:起始边缘

end:结束边缘

Center：居中

Stretch： 拉伸，沾满单元格整个宽度（默认值）

place-items: <align-items> <justify-items>;简写

 

7：justify-content，align-content

顾名思义看文字意思就是设置内容区域在容器里面的水平个居中位置，理所当然的存在合并属性的写法 place-content

Start，end，center，stretch

Space-around: 项目之间的间隔是边缘项目和容器距离的两倍

Space-evenly： 项目之间的间隔相等，项目和容器间隔相等

Space-between

place-content: <align-content> <justify-content>

 

8：grid-auto-columns,grid-auto-rows

 在原来3x3的网格外部存在的内容，这两个属性就是定义存在外部的内容的尺寸。 见：grid-auto-flow文件示例

四：项目属性

1： grid-column-start,grid-column-end，   Grid-row-start,grid-row-end

      左右边框所在的垂直网格线

     上下边框所在的水平网格线

     注：使用这个属性直接控制单元格的大小。

.content {
   display: grid;
   grid-template-columns: repeat(3, 50px);
   grid-template-rows: repeat(3,50px);
 }

 .item1 { 
    grid-column-start: 2; 
    grid-column-end: 3;
 }

虽然定义是50x50的单元格，项目中重新设置该单元格开始和结束的网格线。

另外可以指定网格线的名字进行位置的确定同时这四个属性可以使用关键字span表示跨越多少单元格。

若产生项目重叠则使用z-index指定项目的重叠顺序。

简写：

Grid-column:start  /  end

Grid-row: start  /  end

2：grid-area :指定区域

和容器的grid-template 一起使用，决定项目的位置

也可用作1中的合并简介，直接指定项目的位置在哪。

例子：grid-area:1/1/2/2

3:justify-self,align-self

指定单元格内容的位置。取值和justify-content相同。这两个的区别是一个是定义容器内所有项目，一个是单个项目。

简写： place-self