网格布局详细属性解释--全属性解释

什么是grid布局

grid布局：grid布局是非常强大的css布局，它将容器划分成"行"和"列"，产生单元格，然后指定"项目所在"的单元格，可以看作是二维布局。

容器和项目的基本概念

• 容器：整个采用网格布局的区域叫做容器（container）
• 项目：容器内部采用网格定位的子元素叫做项目（item）

行、列、网格线、单元格、轨道的基本概念

行、列：容器中划分的水平区域叫做行，如上图粉色区域；垂直划分区域叫做列，如上图黄色区域。

单元格：行和列的交叉部分叫做单元格，如上图紫色覆盖区域，一般来说n行 m列会产生n x m个单元格。

网格线：划分区域的线叫做网格线，如上图桔黄色的线，一般来说，n行会有n+1根水平的网格线，m列同样有m+1根垂直的网格线。

轨道：两根网格线之间的空间

父项常属性(容器属性)

①display

display:grid

指定采用网格布局

• 设置后里面的元素会占满空间

② grid-template-columns ；grid-template-rows；grid-template （设置行、列）

grid-template-columns：定义网格布局中的列数，并可定义每列的宽度
grid-template-rows ：定义网格布局的行数以及行高
grid-template ：是grid-template-rows ，grid-template-columns简写
grid-template: grid-template-rows/grid-template-columns
例如：grid-template: repeat(3,200px)/repeat(3,100px);（创建一个三行每行高度200px 三列每列宽度100px 的网格）

该属性的其他取值

• 百分比（length）：占用容器的百分之多少

• repeat：重复，他需要两个参数，第一个是划分了几行或几列，第二个是重复的值，
  如果划分了三行，并且每行行高100px，那么就可以用repeat来写：grid-template-rows:repeat（3,100px）

• auto : auto关键字表示由浏览器自己决定长度

• minmax：它表示一个长度范围，接受两个参数，一个是最小值，一个是最大值：

• min-content：以网格项的最大的最小内容来占据网格轨道
  max-content：以网格项的最大的内容来占据网格轨道

• fr关键字：这个单位用来表示分配剩余的空间，例如：grid-template-columns: 100px 4fr 1fr，表示第一列宽100px，剩余的空间分为5份，第二列宽是第三列的四倍。

• auto-fit；auto-fill
  相同点：

  都会尽可能多的创建轨道
  不足一个轨道的空间平均分配给已有的轨道
  区别：
  auto-fit的最后一步是，折叠空轨道，将空轨道的空间全部平均分配给已有元素的轨道
  auto-fill的最后一步时保留空轨道留白，不会折叠空轨道
  注意：auto-fit 和 auto-fill 只有在容器宽度大于子元素的最小宽度总和时才有显示区别

③grid-row-gap，grid-column-gap ；grid-gap

• grid-row-gap：设置行间距
• grid-column-gap：设置列间距
• grid-gap：是grid-row-gap和grid-column-gap的简写形式，
  书写格式：grid-gap: < grid-row-gap> < grid-column-gap>;

④justify-content；align-content

justify-content:整个内容区域在容器里面的水平位置
align-content: 整个内容区域的垂直位置
justify-content和align-content的取值是相同的，包括：start 、end、center 、stretch 、 space-around 、 space-between、space-evenly

属性取值

（1）stretch：项目大小没有指定时，拉伸占据整个网格容器

（2）start：将网格对齐到网格容器的起始边缘==(头部)==

（3）end：将网格对齐到网格容器的结束边缘==（尾部）==

（4）center：将网格对齐到居中位置

（5） space-evenly：项目与项目的间隔相等，项目与容器边框之间也是同样长度的间隔

（6）space-between ：项目与项目的间隔相等，项目与容器边框之间没有间隔==(先两边贴，再平均分配剩余空间)==

（7）space-around：每个项目两侧的间隔相等，项目之间的间隔比项目与容器边框的间隔大一倍==（平均分配剩余空间）==

⑤justify-items(水平方向)/ align-items(垂直方向)

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

属性取值

（1）stretch：项目大小没有指定时，拉伸占据整个网格容器

（2）start：将网格对齐到网格容器的起始边缘==(头部)==

（3）end：将网格对齐到网格容器的结束边缘==（尾部）==

（4）center：将网格对齐到居中位置

⑥grid-auto-flow 属性

grid-auto-flow：划分网格之后元素会自动放入格子里，默认值是“row”，即是“先行后列”，这个属性可以设置元素放入格子的顺序是"先行后列"还是"先列后行"。column表示"先列后行"。

子项属性（项目属性)

①grid-column-start 属性；grid-column-end 属性；grid-row-start 属性；grid-row-end 属性

• grid-column-start 属性：单元格左边框所在的垂直网格线
• grid-column-end 属性：单元格右边框所在的垂直网格线
• grid-row-start 属性：单元格上边框所在的水平网格线
• grid-row-end 属性：单元格下边框所在的水平网格线

$项目的位置是可以指定的，指定它的边框定位在哪根网格线就可以指定项目位置，需要注意的是，没指定的边框位置否是采取默认值的。$

这四个属性的值除了直接指定网格线之外，还可以使用“span”直接跨越单元格，比如，我们希望a可以跨越第一行和第二行的前两个方格，那么我们就可以直接使用“span”

 .div1{
        background-color: hotpink;
        grid-column-start:span 2;
        grid-row-start:span 2;
    }

②grid-column 属性；grid-row 属性

grid-column 属性：是grid-column-start和grid-column-end的缩写
grid-column: < start-line> / < end-line>；
grid-row 属性：grid-row-start属性和grid-row-end的缩写
grid-column:grid-row: < start-line> / < end-line>

③grid-area 属性

grid-area：指定内容放在哪个区域，可使用grid-row-start、grid-column-start、grid-row-end、 grid-column-end的合并简写形式，直接指定项目的位置，
书写格式： grid-area: < row-start> / < column-start> / < row-end> /
< column-end>;

④justify-self 属性；align-self 属性；place-self 属性

justify-self: 属性设置单元格内容的水平位置（左中右）
start、 end、 center 、stretch（默认值）

align-self:属性设置单元格内容的垂直位置（上中下）
start 、 end 、 center、stretch（默认值）;

place-self:属性是align-self属性和justify-self属性的合并简写形式
书写格式：place-self:center center;

$注意：place-self需要两个值，如果我们忽略了一个值，那么会默认为两个值是相等的$

最后是一张记忆图片cheatsheet