CSS Grid：页面网格布局从未如此简单

页面布局从来就不是一件让人省心的事！

如果pc端的两列布局、表格布局、圣杯布局等已经让你心力交瘁！那么移动端更加五花八门的布局肯定也是让你吃尽苦头！table不知道你用过没？bootstrap用过没？antd用过没？

这些看似花里胡哨的布局，其实就像是一张网，如果刚开始布局的时候就大局在握，后面就有源可寻！如果开始没梳理好，后面东改西补，你可能会想删代码跑路(不能跑)...前面文章有了解过flex布局（基于轴线的布局方式）像是一维布局。这里的Grid布局（基于网格式布局），在页面排版上将容器分成更为明显的块级网格，从线（flex轴线）到面（grid网格）会使css布局更加便利！

一、Grid概念

bootstrap的栅栏格你如果了解过，可能会更好的理解这里的grid！没有用过也没关系，下面是grid一些概念，对造上面的图，方便理解使用grid。

• 容器：采用网格布局的节点区域就叫做容器。

<div className="cover">
   <div className="item item1 red">1</div> //item是项目
   <div className="item item2 black">2</div>
</div>//cover就是容器

.cover{
    display: grid;
}

• 网格线：用来分割容器的线。分为水平网格线和垂直网格线，可以将容器分割成行和列。
• 行和列：水平分割线将容器分割成行（n行需要n+1条水平分割线）；垂直网格线将容器分割成列（n列需要n+1条垂直分割线）
• 单元格：行和列交叉形成了单元格
• 项目：容器内部采用网格定位的子元素，只能是顶层元素，称为"项目"

要明白单元格与项目不是一回事。不要混淆了。

概念大致明白了？那就通过容器和项目的属性来进行网格式布局吧。

二、容器属性

下面主要通过7个属性来设置设置构建容器。

• grid-template-columns/grid-template-rows 设置列/行内容的属性
• grid-gap 设置列/行间距的属性
• grid-template-areas 设置单元格区域的属性
• grid-auto-flow 设置单元格方向属性
• place-items 设置单元格内内容排列位置的属性
• place-content 设置整个内容区域在容器里面的位置的属性
• grid-auto-columns/grid-auto-rows 设置超出原有网格的单元格属性

1.grid-template-columns/grid-template-rows

通过display:grid指定节点使用网格布局后，要开始构建我们的行和列了。

grid-template-columns 设置列属性；
grid-template-rows 设置行属性；

这个属性可以用来设置行高和列宽，设置的参数的值的方式有很多种写法：

下面设置一个3行4列的表格，每个单元格的空间都是100px；下面主要以列来做示例，行的用法是一样的哦。这个属性值比较多，要耐心看

1》使用绝对单位

grid-template-columns: 100px 100px 100px 100px;
grid-template-rows: 100px 100px 100px;

2》使用百分比%

除了使用单位px，还可以使用%；

grid-template-columns: 25% 25% 25% 25%;
grid-template-rows: 33% 33% 33%;

3》使用repeat方法

当有网格很多且重复时，可以使用repeat。repeat接受两个参数，第一个参数是重复的次数，第二个参数是所要重复的值。

grid-template-rows: repeat(3 , 33%);
grid-template-columns: repeat(4, 25%);

repeat除了重复值，还可以重复模式：

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

假如repeat里第一个参数改为3，表示重复3次上述模式，所以下图里的单元格空间已经超出容器了，假如我们不想让它超出，想让容器自动判断是否填充，可以使用auto-fill关键字。

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

4》fr 关键字
fr（fraction 的缩写，意为"片段"），如果两列的宽度分别为1fr和2fr，就表示后者是前者的两倍。也可以结合px使用，会对剩余空间按照fr进行分配。

grid-template-columns: 50px 3fr 1fr 2fr;

5》minmax()方法

minmax()接受2个参数，最小值和最大值长度范围，该列/行的大小会根据剩余空间进行自动分配，大小在长度范围内。

grid-template-columns:150px 1fr 1fr minmax(50px, 150px);

6》auto 关键字

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

grid-template-columns:100px auto 130px 100px;

第二列会根据剩余空间自动分配空间。

7》网格线的名称

除了设置大小，也能设置网格线的名称，使用方括号，指定每一根网格线的名字，方便以后的引用。4列就需要是5条分割线，分割线的名称可以重复。

grid-template-columns: [c1] 100px [c2] 100px [c1] 100px [c3] auto [c4];

2.grid-gap

grid-gap 属性用来设置行/列间距的，是grid-row-gap 属性、grid-column-gap 属性，的合并简写。这3个属性最新标准也可不写前缀，写为：row-gap、column-gap、gap。

grid-row-gap:10px;
grid-column-gap:20px;
等价于下面代码：
grid-gap:10px 20px;
等价于：
gap:10px 20px;

3.grid-template-areas

网格布局允许指定"区域"（area），一个区域由单个或多个单元格组成。grid-template-areas属性用于定义区域。

grid-template-areas: 
    'a a a a '
    'b b b b ' 
    'd e . g ';
    
1.将单元格写成相同的名字就可以合并区域
2.如果某些区域不需要利用，则使用"点"（.）表示。

区域的命名会影响到网格线。每个区域的起始网格线，会自动命名为区域名-start，终止网格线自动命名为区域名-end。

4.grid-auto-flow

划分网格以后，容器的子元素(项目）会按照顺序，自动放置在每一个网格。默认的放置顺序是"先行后列"，即先填满第一行，再开始放入第二行。
grid-auto-flow决定放置顺序，默认值是row。

grid-auto-flow: column;//可将放置顺序改为先列后行

当对**项目**进行指定位置时，看下图，项目1上面会有一片无人使用的区域。
.item1 {
    grid-row-start: 2;
    grid-row-end: 4;  
}

grid-auto-flow: column dense;
//dense表示要尽可能紧密填满，尽量不出现空格。

5.place-items

从前面的一些图可以看出来，网格布局界限十分清晰，但是我们的项目内容却始终躲靠在单元格的左上角，显得十分的胆怯。哼！我们自然要把它揪出来。

place-items决定项目的水平和垂直位置，是justify-items（水平位置） 属性、align-items（垂直位置） 属性的合并缩写：

place-items:center center；

等价于：

justify-items: center 
align-items: center

当然属性值除了center，具体属性值如下：

start：对齐单元格的起始边缘。

end：对齐单元格的结束边缘。

center：单元格内部居中。

stretch：拉伸，项目大小没有指定时-占满单元格的整个宽度（默认值）。

如果省略第二个值，则浏览器认为与第一个值相等。

6.place-content

我们把容器设置大点，就会发现整个内容区域在容器里面的位置也是躲靠在左上角的，可以通过place-content来设置。使用方法大致同等上面place-items。

place-content是justify-content（水平方向） 属性、align-content （垂直方向）属性的缩写。

place-content:center

属性有以下取值：

start - 对齐容器的起始边框。

end - 对齐容器的结束边框。

center - 容器内部居中。

stretch - 项目大小没有指定时，拉伸占据整个网格容器。

space-around - 每个项目两侧的间隔相等。所以，项目之间的间隔比项目与容器边框的间隔大一倍

space-between - 项目与项目的间隔相等，项目与容器边框之间没有间隔。

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

7. grid-auto-columns/grid-auto-rows

当项目超出容器，设置超出原有网格的单元格属性时，超出的单元格大小将于项目大小一样。可以通过grid-auto-columns/grid-auto-rows设置超出部分单元格的大小。

设置一个行超出容器的项目，超出部分行高将于项目一样高。
.item1 {
    grid-row-start: 4;
    grid-row-end: 5;  
}
设置超出部分行高为200px，如下图
grid-auto-rows: 200px;

还有两种简写方法如下：

grid-template 属性是grid-template-columns、grid-template-rows和grid-template-areas这三个属性的合并简写形式。

grid 属性是grid-template-rows、grid-template-columns、grid-template-areas、 grid-auto-rows、grid-auto-columns、grid-auto-flow这六个属性的合并简写形式。

三、项目属性

• grid-column/grid-row 设置项目位置
• grid-area 设置项目放置区域
• place-self 设置项目在单元格内的位置

1.grid-column/grid-row

上面已经用到过这个属性，就是设置项目在容器中的位置。
grid-column是grid-column-start（左边框所在的垂直网格线）、grid-column-end（右边框所在的垂直网格线）的缩写。
grid-row是grid-row-start（上边框所在的水平网格线）、grid-row-end（下边框所在的水平网格线）的缩写。

.item-1 {
  grid-column: 1 / 3;
  grid-row: 1 / 2;
}
/* 等同于 */
.item-1 {
  grid-column-start: 1;
  grid-column-end: 3;
  grid-row-start: 1;
  grid-row-end: 2;
}

1.可以通过数字指定第几根线。下面只设置了列的开始和结束，行没设置，则会在默认位置。
.item1 {
    grid-column-start: 1;
    grid-column-end: 2;  
 }
2.也可以设置为指定为通过**grid-template-columns**设置的网格线的名字。

grid-template-columns: [c1] 100px [c2] 100px [c1] 100px [c3] 100px [c4];
.item1 {
    grid-column-start: c2;
    grid-column-end: c3;  
  }

3.使用span关键字，表示"跨越"，即左右边框（上下边框）之间跨越多少个网格。
.item1 {
    grid-column-start: 2;  
    grid-column-end: span 2; 
 }
等价于：
.item1 {
    grid-column:2 / span 2  
  }

2.grid-area

设置项目在容器中的区域位置。与上面通过分割线的只用一样，所以也能做为分割线4个属性的缩写。

grid-template-areas:
    'a a a a'
    'a a a a'
    'd c c c'
.item1 {
    grid-area: a
  } 

等价与：


.item1 {
    grid-area: 1 / 1 / 1 / span 4
  }

3.place-self

与place-items用法一致，但只作用于单个项目,能覆盖place-items的值。是justify-self（设置单元格内容的水平位置 左中右）、align-self（设置单元格内容的垂直位置上中下）的缩写。

.cover{
  place-items:center
    
}
.item1 {
    place-self: start
  }

参考文章

如有不妥！欢迎指正