本文深入解析Grid布局，包括其概念、核心属性如grid-template-columns/rows、grid-gap、grid-template-areas等，教你如何利用它高效组织PC和移动端页面。理解容器与项目的关系，掌握place-items/place-content，以及auto-flow、auto-columns/rows的使用。无论你是新手还是老手，都能在这里找到布局新思路。
页面布局从来就不是一件让人省心的事！
如果pc端的两列布局、表格布局、圣杯布局等已经让你心力交瘁！那么移动端更加五花八门的布局肯定也是让你吃尽苦头！table不知道你用过没？bootstrap用过没？antd用过没？
这些看似花里胡哨的布局，其实就像是一张网，如果刚开始布局的时候就大局在握，后面就有源可寻！如果开始没梳理好，后面东改西补，你可能会想删代码跑路(不能跑)...前面文章有了解过flex布局(基于轴线的布局方式)像是一维布局。这里的Grid布局(基于网格式布局)，在页面排版上将容器分成更为明显的块级网格，从线(flex轴线)到面(grid网格)会使css布局更加便利！
一、Grid概念
bootstrap的栅栏格你如果了解过，可能会更好的理解这里的grid！没有用过也没关系，下面是grid一些概念，对造上面的图，方便理解使用grid。
容器：采用网格布局的节点区域就叫做容器。
.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
}
如有不妥！欢迎指正
扫一扫
311
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
