前言CSS网格布局用于将页面划分为几个主要区域，或者定义组件内部元素的大小、位置和层级之间的关系。与表格一样，网格布局允许我们按行或列对齐元素。然而，CSSGrid可能仍然比CSSTables更容易布局。例如，网格容器的子元素可以定位自己，以便它们真正重叠和分层，就像CSS定位元素一样。网格布局是一种二维网格布局。与flex和普通的浮动布局相比，它最大的优势在于不依赖于dom节点的结构，而是直接将整个页面划分为多个网格，然后进行填充。能力①二维布局，提供水平和垂直布局，类似于表格②可以设置具体的行数和列数，可以设置每行每列的大小，提供多种灵活的大小控制属性③可定义每个网格之间的间隔（水平和垂直）④可以设置元素的对齐方式（基于元素所在的单元格），批量控制，特定的子元素控制⑤元素可以填充到指定的网格中（某个特定的网格）行，某列，横跨网格）），这个功能可以在不修改html结构的情况下任意排列元素兼容性在开发之前，你必须了解它的兼容性。总的来说，兼容性还是不够全面，但如果有公司用于内部系统开发，网格布局会是一个不错的选择。基本概念Gridline（网格线）用于将整体分割成每一根单独的线，可以是水平的（行网格线）也可以是垂直的（列网格线），如下图红线和蓝线所示.Gridcell（网格单元）划分后，每一个网格就是一个cell，也是网格布局的最小单位。网格区域（gridarea）是若干个cell拼接而成的区域。网格间隙（gridgap）单元格之间的距离，可以是垂直的也可以是水平的。容器属性（container）以下图片来源：http://grid.malven.co/display（开始布局）grid-template（网格模板）用于定义网格的列、行和区域。grid-gap（单元格间隙）justify-items用于定义主轴（水平）对齐align-items用于设置副轴（垂直）对齐justify-content用于设置主轴（水平）与多个axesAlignmentalign-content用于在副轴（垂直）上对齐多个轴grid-auto-flow用于定义cellschildren（组件）的自动遍历顺序以下图片来源：http://grid.malven。co/grid-column用于控制组件在水平方向占据多少个网格grid-row用于控制组件在垂直方向占据多少个网格grid-row+grid-column合并控制组件在垂直方向和水平方向各占多少个格子？justify-self用于定义组件内容在主轴（水平）方向上的对齐方式。align-self用于定义组件内容在次轴（垂直）方向的对齐方式。实际例子如何不改变在dom节点结构的情况下，实现了如下功能：在屏幕不同分辨率的情况下，页面中的组件自动平移。①电脑：宽度大于1200px，布局如下：②平板：宽度大于992px，小于1200px，布局如下：③手机：宽度小于992px，布局如下：具体实现代码来源，https://github.com/TheWalking...html代码
