一、概述CSS网格布局（Grid）是一个二维的页面布局系统，它的出现将彻底颠覆传统的页面布局方式。首先，让我们介绍几个概念：想象一个三行三列的布局。网格线是组成网格的所有线。三行三列的布局每行有4条网格线。网格轨道是两条相邻的平行网格线之间的部分。和flex布局一样，它会有一个父容器和子项，这里我们称之为gridcontainer和griditem。接下来我们从网格容器介绍网格布局到网格项的基本属性。2、网格容器将属性显示值设置为grid或inline-grid，创建一个网格容器，该容器的所有直接子节点都会自动成为网格项。示例1：网格项按行排列，网格项占据容器的整个宽度。示例2：网格项按行排列，网格项宽度由自身宽度决定。3、显示网格属性grid-template-rows和grid-template-columns容器指定网格布局后，需要进行行列划分。grid-template-columns属性定义每一列的列宽，grid-template-rows属性定义每一行的行高。示例3：属性grid-template-rows用于定义行的大小，即轨道的大小。轨道大小可以是任何非负长度值（px、%、em等）。网格项1的行高为50px，网格项2的行高为100px。因为只定义了两个行高，griditem3和4的行高取决于它们自己的高度。示例4：与行的定义类似，属性grid-template-columns用于定义列的维度。因为定义中只有三列，所以第4、5和6项排在新的一行上；并且因为它们在第1、2、3列的轨道上，所以它们的宽度等于定义宽度中第1、2、3列的轨道宽度。网格项的第1列、第2列和第3列的宽度分别为90px、50px和120px。4.GriditemsspanrowsandcolumnsGriditems默认占据一行一列，但是你可以使用上一节定位item的属性来指定item跨越多行或多列。示例5：通过设置grid-column-start和grid-column-end属性值使网格项跨越多列。五、justify-content属性、align-content属性justify-content属性是整个内容区域在容器中的水平位置（左中右），align-content属性是整个内容的垂直位置区域（上、中、下）。这两个属性的写法完全一样，都可以取如下值。（下图均以justify-content属性为例，align-content属性图完全一样，只是水平方向改为垂直方向。）start-对齐起始边框容器。end-对齐容器的结束边界。center-将容器居中。stretch-当未指定项目大小时，拉伸以占据整个网格容器。space-around-每个项目两侧的间距相等。因此，项目之间的间距是项目与容器边框之间的间距的两倍。space-between-项目之间的间距相等，项目和容器边框之间没有空间。space-evenly-项与项之间的间距相等，项与容器边框之间的空间也是如此。六、grid-auto-columns属性、grid-auto-rows属性有时，某些项目的指定位置在现有网格之外。比如grid只有3列，但是第5行指定了某个item，此时浏览器会自动生成一个冗余的grid用于放置item。grid-auto-columns和grid-auto-rows属性用于设置浏览器自动创建的冗余网格的列宽和行高。它们的编写方式与grid-template-columns和grid-template-rows完全一样。如果不指定这两个属性，浏览器将根据单元格内容的大小来确定新添加的网格的列宽和行高。希望我的文章能对你有所帮助。欢迎来到滴滴：rgz987
