援用阮一峰老师话说网格布局（Grid）是最弱小的 CSS 布局计划。CSS Grid 网格布局教程
它将网页划分成一个个网格，能够任意组合不同的网格，做出各种各样的布局。以前，只能通过简单的 CSS 框架达到的成果，当初浏览器内置了。
上图这样的布局，就是 Grid 布局的拿手好戏。
Grid 布局与 Flex 布局有肯定的相似性，都能够指定容器外部多个我的项目的地位。然而，它们也存在重大区别。
Flex 布局是轴线布局，只能指定"我的项目"针对轴线的地位，能够看作是一维布局。Grid 布局则是将容器划分成"行"和"列"，产生单元格，而后指定"我的项目所在"的单元格，能够看作是二维布局。Grid 布局远比 Flex 布局弱小。
上面我给大家分享一个用grid实现的自适应9宫格，格子大小自定义，距离不变，以前都是用dom计算，好蠢。
须要依据本人的布局个数，来计算每个格子大小，次要是每个格子的宽高减去相应行和列距离的大小，以九宫格为列，有3行3列，有行间距2 24px, 有列间距2 24px，每个格子的宽高都要减去48px / 3。
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0" /> <title>grid</title></head><body> <div class="container"> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> </div></body><style> * { padding: 0; margin: 0; box-sizing: border-box } body { height: 100vh; padding: 20px; } .container { width: 100%; height: 100%; display: grid; /*行间距*/ grid-row-gap: 24px; /*列间距*/ grid-column-gap: 24px; /*每3行有2个行间距，所以每个格子的宽高都要减去(24*2) / 3 */ grid-template-columns: repeat(3, calc(33.33% - 16px)); grid-template-rows: repeat(3, calc(33.33% - 16px)); overflow: hidden; } .item { background: #33a8a5; }</style></html>