网格布局（Grid）是最强大的 CSS 布局方案
Flex 布局是轴线布局，只能指定"项目"针对轴线的位置，可以看作是一维布局。
Grid 布局则是将容器划分成"行"和"列"，产生单元格，然后指定"项目所在"的单元格，可以看作是二维布局。Grid 布局远比 Flex 布局强大。
- 容器——采用网格布局的区域
- 项目——容器内采用网格定位的子元素（项目只能是容器的顶层子元素，不包含项目的子元素，如下方代码的元素就不是项目。Grid 布局只对项目生效。）
上面代码中，最外层的元素是容器，内层的三个元素是项目。
块级容器（宽度撑满整行）时
行内容器（宽度随内容自适应）时
使用网格布局后，项目的、、、和等设置都将失效。
绝对值 px
在容器内划分出3列，每列宽度为100px
百分比值 %
将容器等分为3列，每列宽度为容器总宽度/3
比例值 fr
将容器划分为2列，第1列的宽度 ：第2列的宽度 = 1:2
fr 是fraction 的缩写，意为"片段"，可以与绝对长度的单位结合使用
第一列的宽度为150像素，第二列的宽度是第三列的一半
- 如果所有fr值之和大于1，则按fr值的比例划分可自动分配尺寸。
- 如果所有fr值之和小于1，最终的尺寸是可自动分配尺寸和fr值的乘法计算值。
和auto关键字混合使用
fr值的可自动分配尺寸是容器尺寸减去设置auto关键字的列的fit-content尺寸。在本例中，由于设置auto关键字的这一列里面内容比较少，fit-content尺寸就是这几个字符的宽度尺寸，因此，最终的尺寸表现就是最后3列按照1:1:1的比例平分了容器尺寸减去“宽度auto”这几个字符的宽度得到的尺寸。
minmax()函数值
函数产生一个长度范围，表示长度就在这个范围之中。它接受两个参数，分别为最小值和最大值。
表示列宽不小于，不大于。
函数值
接受两个参数，第一个参数是重复的次数，第二个参数是要重复的值。
或
上方代码定义了6列，第一列和第四列的宽度为，第二列和第五列为，第三列和第六列为。
无法确定列数时，重复次数使用关键字：auto-fill 或 auto-fit
关键字往往会和其他网格布局函数一起使用，例如minmax()函数
这就实现了无论grid容器多宽，grid子项都会等比例充满grid容器（因为设置了1fr），同时保证宽度不小于100px，网格布局的列数自动计算分配的智能弹性布局效果。
使用auto-fill关键字自动填充的时候，repeat()函数不能和auto一起使用的，但可以与长度值和百分比值一起使用。
使用auto-fit关键字实现的布局效果要比auto-fill关键字实现的更符合常规的布局需求，效果见
fit-content()函数
让尺寸适应于内容，但不超过设定的尺寸，常用于希望grid子项的宽度随着内容变化，但是又不希望宽度太大的场景。
fit-content()函数只支持数值和百分比值，fr值是不合法的。
min-content
最小内容尺寸中最大的那个最小内容尺寸值。网格布局中的同一行grid子项的高度和同一列grid子项的宽度都是一致的，因此min-content指的并不是某一个格子的最小内容尺寸，而是一排或者一列格子中所有最小内容尺寸中最大的那个最小内容尺寸值。
max-content
max-content关键字和min-content关键字类似，只是最终的尺寸是最大内容宽度中最大的那一个值。
auto
由浏览器自己决定长度
尺寸的上限是最大内容尺寸的最大值，但是不同于max-content关键字，max-content关键字的尺寸是固定的，这里的尺寸是会受到justify-content属性和align-content属性影响的。计算规则有些复杂，了解即可。
第二列的宽度，基本上等于该列单元格的最大宽度，除非单元格内容设置了，且这个值大于最大宽度。
使用方法与列相同
范例
单元格大小固定，但容器大小不确定时，如果希望每一行（或每一列）容纳尽可能多的单元格，可以使用关键字进行自动填充。
每列宽度，然后自动填充，直到容器不能放置更多的列。
属性和属性中，使用方括号指定每一根网格线的名字，方便以后的引用。
上面代码指定网格布局为3行 3列，因此有4根垂直网格线和4根水平网格线。方括号里面依次是这八根线的名字。
由于网格的中间区域的网格线是由两边格子公用的，因此，可以给网格线起两个名称（使用空格分隔），分别表示网格线的两侧。
设置行间距 row-gap
支持数值和百分比值
设置列间距 column-gap
支持数值和百分比值
是和合并的简写形式
如果省略了第二个值，浏览器认为第二个值等于第一个值。
支持数值和百分比值和calc()函数
可以将网格布局中的某个单元格或多个单元格定义为一个区域
网格区域一定要形成规整的矩形区域，无论是L形，还是凹的或凸的形状都会认为是无效的属性值。
区域的命名会影响到网格线。每个区域的起始网格线，会自动命名为，终止网格线自动命名为。比如，区域名为，则起始位置的水平网格线和垂直网格线叫做，终止位置的水平网格线和垂直网格线叫做。
上面代码先划分出9个单元格，然后将其定名为到的九个区域，分别对应这九个单元格。
实战范例见 grid-template-areas与土地区域划分 » CSS新世界demo演示
不属于任何区域的单元格，用.表示
多个单元格合并成一个区域
上面代码中，顶部是页眉区域，底部是页脚区域，中间部分则为和。
- row 【默认值】—— "先行后列"
- —— "先列后行"。 使用范例见
- ，表示"先行后列"，并且尽可能紧密填满，尽量不出现空格。
- ，表示"先列后行"，并且尽可能紧密填满，尽量不出现空格。
默认的
修改设置，设为
如果将设置改为，表示"先列后行"，并且尽量填满空格，则效果如下
dense
表示网格的自然排列启用“密集”打包算法，也就是说，如果稍后出现的网格比较小，则尝试看看其前面有没有合适的地方放置该网格，使网格尽可能排列紧凑。
举个通俗的例子，村里9户人家，每一户都分得了一块田地，大家的田地都是紧密相连的。孤寡老人李大爷和王大爷相继去世，于是就有两块田地是空的，因为有空缺，所以这个时候，如果我们使用无人机从田地上方拍一个照片，就会看到照片中的田地是稀疏的，不是紧密的。这个时候，村里又来了两户新人家，也要分田地。如果使用dense属性值，则优先分配之前李大爷和王大爷留下的空缺的土地，因为这样会让整片田地没有空缺，让田地是“密集的”（“紧密的”）。
范例：
justify-items
指定单元格内容的水平对齐方式，属性值有：
- stretch：【默认值】拉伸，占满单元格的整个宽度。
- start：对齐单元格的起始边缘。
- end：对齐单元格的结束边缘。
- center：单元格内部居中。
align-items
指定单元格内容的垂直对齐方式，属性值有：
- normal：【默认值】会根据使用场景的不同表现为stretch或者start。
- stretch：拉伸，占满单元格的整个宽度。
- start：对齐单元格的起始边缘。
- end：对齐单元格的结束边缘。
- center：单元格内部居中。
- baseline：基线对齐（align-items属性特有属性值）
效果见 justify-items/align-items属性值样式表现 » CSS新世界demo演示
在绝大多数场景下normal的表现和stretch的表现是一模一样的，但是如果grid子项是具有内在尺寸或具有内在比例的元素，则此时normal的表现类似于start属性值的表现。最典型的具有内在尺寸和比例的元素就是img图片元素。
grid子项是两个替换元素，一个替换元素是图片，具有内在的尺寸和比例；另一个替换元素是按钮，没有内在尺寸和比例。结果垂直方向的对齐表现如图6-111所示，图片的表现与start的表现一样，位置居顶且没有拉伸，而按钮的表现与stretch的表现一样，在垂直方向上完全被拉伸了。
对比效果见 align-items默认值图片和按钮的样式表现 » CSS新世界demo演示
是属性和属性的合并简写形式。
如果省略第二个值，则浏览器认为与第一个值相等。
IE浏览器和Edge浏览器都不支持place-items属性。如果不考虑浏览器的兼容性，在CSS中实现垂直居中对齐效果的最佳方法就是使用place-items属性：
跟属性的用法完全一致，但只作用于单个项目。
跟属性的用法完全一致，也是只作用于单个项目。
是属性和属性的合并简写形式。
如果省略第二个值，属性会认为这两个值相等。
是整个内容区域在容器里面的水平位置（左中右）
是整个内容区域的垂直位置（上中下）。
要想justify-content属性和align-content属性起作用，就需要让grid子项的总尺寸小于grid容器的尺寸。要么给gird子项设置较小的具体的尺寸值，要么让gird子项的尺寸是auto，同时保证内容尺寸较小。
都可以取下面这些值：
- normal【默认值】效果和stretch一样
- start - 对齐容器的起始边框。
- end - 对齐容器的结束边框。
- center - 容器内部居中。
- stretch - 项目大小没有指定时，拉伸占据整个网格容器。
- space-around - 每个项目两侧的间隔相等。所以，项目之间的间隔比项目与容器边框的间隔大一倍。
- space-between - 项目与项目的间隔相等，项目与容器边框之间没有间隔。
- space-evenly - 项目与项目的间隔相等，项目与容器边框之间也是同样长度的间隔。
效果见 justify-content/align-content属性值样式表现 » CSS新世界demo演示
是属性和属性的合并简写形式。
如果省略第二个值，浏览器就会假定第二个值等于第一个值。
通过指定项目的四个边框分别定位在哪根网格线，来指定项目的位置
- 属性：左边框所在的垂直网格线
- 属性：右边框所在的垂直网格线
- 属性：上边框所在的水平网格线
- 属性：下边框所在的水平网格线
属性值可以是负整数，但是不能是0，负整数表示从右侧开始计数网格线。
属性值还可以指定为网格线的名字
名称还有一个自动补全-start后缀和-end后缀的特性
表示"跨越"，即左右边框（上下边框）之间跨越多少个网格。
span后的数字不能是负值，也不能是0，也不能是小数。
1号项目的左边框距离右边框跨越2个网格。
grid-column-end设置span不会产生任何效果
如果网格布局中有多个网格线的命名是B或者是B-start
则spanB表示离grid-column-end位置最近的一个网格线B，而如果属性值是B而不是spanB，则起始位置会是离grid-column-end位置最远的一个网格线B。
效果见 span和不同数量网格线命名效果 » CSS新世界demo演示
如果网格布局中没有网格线的命名是B或者B-start
如果产生了项目的重叠，则使用属性指定项目的重叠顺序
- 属性是和的合并简写形式
- 属性是属性和的合并简写形式。
斜杠以及后面的部分可以省略，默认跨越一个网格。
项目占据第一行，从第一根列线到第三根列线。
也可以使用关键字，表示跨越多少个网格。
项目占据的区域，包括第一行 + 第二行、第一列 + 第二列。
其他效果范例如下：
1号项目的左边框是第二根垂直网格线，右边框是第四根垂直网格线，没有指定上下边框，所以会采用默认位置，即上边框是第一根水平网格线，下边框是第二根水平网格线。
1号项目位于区域
属性还可用作、、、的合并简写形式，直接指定项目的位置。
css中grid网格布局的经典应用——图文层叠_朝阳39的博客-CSDN博客
- “隐式网格” —— 是非正常网格，其在grid子项多于设置的单元格数量，或grid子项的位置出现在设定的网格范围之外时出现
- “显式网格” —— 在规定容器内显示的网格
属性和属性用来设置“隐式网格” 的列宽和行高。它们的写法与和完全相同。如果不指定这两个属性，浏览器完全根据单元格内容的大小，决定新增网格的列宽和行高。
默认值是auto，可以是长度值、百分比值和fr值，也可以是min-content关键字和max-content关键字，也支持mimmax()函数和fit-content()函数，但是不支持repeat()函数。
划分好的网格是3行 x 3列，但是，8号项目指定在第4行，9号项目指定在第5行。
上面代码指定新增的行高统一为50px（原始的行高为100px）。
从易读易写的角度考虑，建议不要合并属性，所以了解即可，方便读懂别人的代码
是、和这三个属性的合并简写形式。
属性值none表示将3个CSS属性都设置为初始值none。
网格线名称总是出现在网格尺寸和区域名称的两侧
[col-name1-end]和[col-name2-start]必须放在同一个中括号里面，否则就是不合法的。但是，在包含区域名称的grid-template缩写语法中，[col-name1-end][col-name2-start]既可以放在一个中括号中，也可以分开放在两个中括号中。
包含区域名称的grid-template缩写属性不支持repeat()函数
是、、、 、、这六个属性的合并简写形式。
版权声明：
本文来源网络，所有图片文章版权属于原作者，如有侵权，联系删除。
本文网址：https://www.mushiming.com/mjsbk/8309.html