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）

以下图片来源：http://grid.malven.co/

display（启动该布局）

grid-template（网格模板）

用于定义 grid columns, rows 和areas。

grid-gap（单元格间隙）

justify-items

用于定义主轴（水平）对齐方式

align-items

用于定于副轴（垂直）对齐方式

justify-content

用于定于主轴（水平）上多跟轴线的对齐方式

align-content

用于定于副轴（垂直）上多跟轴线的对齐方式

grid-auto-flow

用于定义单元格的自动遍历顺序

children（组件）

以下图片来源：http://grid.malven.co/

grid-column

用于控制该组件在水平方向上占多少个格

grid-row

用于控制该组件在垂直方向上占多少个格

grid-row + grid-column

合并控制组件在垂直水平方向上各占多少个格

justify-self

用于定义该组件在主轴（水平）方向上内容的对齐方式

align-self

用于定义该组件在副轴（垂直）方向上内容的对齐方式

https://blog.csdn.net/weixin_33950035/article/details/88705950