引用阮一峰老师话说网格布局（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>
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。