grid布局方案
前言
CSS网格布局用于将页面分割成数个主要区域，或者用来定义组件内部元素间大小、位置和图层之间的关系。像表格一样，网格布局让我们能够按行或列来对齐元素。 但是，使用CSS网格可能还是比CSS表格更容易布局。 例如，网格容器的子元素可以自己定位，以便它们像CSS定位的元素一样，真正的有重叠和层次。
介绍
gird布局是一种基于二维的网格布局，与flex和普通的浮动布局相比，他最大的优势在于不取决dom节点的结构，而是直接把整个页面划分为多个格子，继而进行填充。
提供能力
①二维布局，提供横、竖方向布局，与table相似
②可设置具体的行数、列数，且可设置每行、每列的大小，提供多种的弹性大小控制属性
③可定义每个格子间的间隔（横竖）
④可设置元素的对齐方式（基于元素所在单元格），批量控制，具体某个子元素控制
⑤可让元素填充到指定的格子（某行、某列，跨格子），此功能可以对元素进行任意的布局，而无需修改html结构
兼容性
在开发之前，你得先了解其兼容性。总体来说，兼容性还是不够全面，但如果一些公司用于内部系统开发，grid布局将会是一个不错的选择。
基本概念
Grid line（网格线）
用于将整体划分为每一个各自的线，可以水平（row grid lines），也可以是垂直的（column grid lines），如下图中的红线蓝线。
Grid cell（网格单元格）
被划分之后每一个格子就是单元格，也是gird布局的最小单位。
Grid area（网格区域）
若干个单元格拼接而成的区域。
Grid gap（网格间隙）
单元格与单元格之间的距离，可以垂直也可以水平。
容器属性（container）
display（启动该布局）
grid-template（网格模板）
用于定义 grid columns, rows 和areas。
grid-gap（单元格间隙）
justify-items
用于定义主轴（水平）对齐方式
align-items
用于定于副轴（垂直）对齐方式
justify-content
用于定于主轴（水平）上多跟轴线的对齐方式
align-content
用于定于副轴（垂直）上多跟轴线的对齐方式
grid-auto-flow
用于定义单元格的自动遍历顺序
children（组件）
grid-column
用于控制该组件在水平方向上占多少个格
grid-row
用于控制该组件在垂直方向上占多少个格
grid-row + grid-column
合并控制组件在垂直水平方向上各占多少个格
justify-self
用于定义该组件在主轴（水平）方向上内容的对齐方式
align-self
用于定义该组件在副轴（垂直）方向上内容的对齐方式
https://blog.csdn.net/weixin_33950035/article/details/88705950
