网格介绍名词解释CSS网格布局(Grid Layout )是CSS中最强大的布局系统。 这意味着它是一个二维系统，可以同时处理列和行。
网格系统的处理方式与FLEX柔性布局类似，并且在父容器包含多个项元素时使用。
以下是栅格系统的兼容性数据，因此是否使用栅格布局取决于项目中使用的场景。
声明容器块级容器
style * { padding: 0； 边距： 0； } body { padding: 200px； } article { width: 400px； height: 200px； border: solid 5px silver； 显示：网格； 网格模板行： 50 % 50 %； 网格模板列336025 % %； } article div { background : blue violet； background-clip : content-box； padding: 10px； border: solid 1px #ddd； }/stylearticlediv/div div/div div/div div/div div/div/div/div/div/article行级容器
display :线上网格； 划分矩阵网格有点像表，也有行和列。 使用grid-template-columns规则分割列数，使用grid-template-rows分割行数。
固定宽度下是以固定宽度分为2行3列的例子，如果容器的宽度太大，就会出现白色。
style* { padding: 0； 边距： 0； } body { padding: 200px； } article { width: 300px； height: 200px； border: solid 5px silver； 显示：网格； 网格模板行3360100 px 100 px； 网格模板列3360100 px 100 px； } article div { background : blue violet； background-clip : content-box； padding: 10px； border: solid 1px #ddd； }/style . article div/div div/div div/div div/div/div/article百分比可以使用百分比自动匹配容器。
显示：网格； 网格模板行： 50 % 50 %； 网格模板列336025 % %； 使用重新设定repeat统一设定值。 第一个参数是重复数，第二个参数是重复值
网格模板行3360报告(2，50 % )； 网格模板列3360报告(2，50 % )； 可以设置多个值以定义重复。 以下定义4列，以100%、20px重复排列。
显示：网格； 网格模板行3360报告(2，50 % )； 网格模板列3360报告(2100 px 50px )； 自动填充自动填充根据容器大小自动设置元素大小。
width: 300px； height: 200px； 显示：网格； 网格模板行：报告(自动文件，100px )； 网格模板列3360报告(自动文件，100px )； 比例划分是以fr为单位设定元素在空间中所占的比例，以下按1份-2份分为两组共4列。
单元的组合
width: 300px； height: 200px； 显示：网格； 网格模板行： 1fr 2fr； grid-template-columns 3360100 px1fr2fr； 重复定义
width: 300px； height: 100px； 显示：网格； 网格模板行：报告(2，1fr )； 网格模板列3360报告(2，1 fr2fr )； 组合定义网格模板是网格模板行、网格模板列和网格模板阵列三个属性的简称。
以下是使用grid-template同时声明grid-template-rows和grid-template-columns :
grid-template 3360100 px1fr/50px1fr以下是使用grid-template定义grid-template-areas的，以下介绍了grid-template-areas的使用方法
网格模板： ' header.'.'.main.' ' footer footer.'； minmax可以使用minmax法设定取值范围。 以下行的高度取最小100px ~最大1fr之间的值。
width: 300px； height: 300px； 显示：网格； 网格模板行：100 px minmax (100 px，1fr )； grid-template-columns 3360100 px1fr； 使用row-gap设置行距的定义行距。
width: 300px； height: 200px； 显示：网格； 网格模板行：报告(2，1fr )； 网格模板列3360报告(3，1fr )； 低gap : 30px； 使用列间距column-gap定义列间距。
width: 300px； height: 200px； 显示：网格； 网格模板行：报告(2，1fr )； 网格模板列3360报告(3，1fr )； column-gap: 20px； 组合定义gap规则允许您一次定义行和列之间的间距。 如果间隔相同，则只能设置一个值。
设置行列间距为20px与10px
width: 300px； height: 200px； 显示：网格； 网格模板行：报告(2，1fr )； 网格模板列3360报告(3，1fr )； gap: 20px 10px；统一设置行列间距为20px
gap: 20px； 接下来