display:flex我们都很熟悉了，今天偶然看到到了一个新的属性，display:grid，很陌生，百度查了一下，它-CSS Grid布局 （又名"网格"），是一个基于二维网格布局的系统，主要目的是改变我们基于网格设计的用户接口方式。不过目前还未普及，先学着呗！
主要属性：
grid-template-columns：//竖向排列
grid-template-rows：//横向排列
直接上🌰-自适应九宫格：
<style type="text/css">
.content {
padding: 10px;
display: grid;
grid-template-columns: auto auto auto;/*有几列，每列有多大*/
grid-template-rows: auto auto auto; /*有几行，每行有多大*/
grid-template-rows: auto 1fr auto;/*每一份（1fr）是网格容器宽度的几之一*/
height: 780px;
background-color: #000;
grid-gap: 10px;/*上下左右间隔*/
}
.b {
background-color: red;
}
</style>
<div class="content">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
<div class="box">4</div>
<div class="box">5</div>
<div class="box">6</div>
<div class="box">7</div>
<div class="box">8</div>
<div class="box">9</div>
</div>
image.png
常见属性：
- justify-items：
start：将内容对齐到网格区域(grid area)的左侧
end：将内容对齐到网格区域的右侧
center：将内容对齐到网格区域的中间（水平居中）
stretch：填满网格区域宽度（默认值） - align-items：
start：将内容对齐到网格区域(grid area)的顶部
end：将内容对齐到网格区域的底部
center：将内容对齐到网格区域的中间（垂直居中）
stretch：填满网格区域高度（默认值） - justify-items：
start：将网格对齐到 网格容器(grid container) 的左边
end：将网格对齐到 网格容器 的右边
center：将网格对齐到 网格容器 的中间（水平居中）
stretch：调整 网格项(grid items) 的宽度，允许该网格填充满整个 网格容器 的宽度
space-around：在每个网格项之间放置一个均匀的空间，左右两端放置一半的空间
space-between：在每个网格项之间放置一个均匀的空间，左右两端没有空间
space-evenly：在每个栅格项目之间放置一个均匀的空间，左右两端放置一个均匀的空间 - align-content：
start：将网格对齐到 网格容器(grid container) 的顶部
end：将网格对齐到 网格容器 的底部
center：将网格对齐到 网格容器 的中间（垂直居中）
stretch：调整 网格项(grid items) 的高度，允许该网格填充满整个 网格容器 的高度
space-around：在每个网格项之间放置一个均匀的空间，上下两端放置一半的空间
space-between：在每个网格项之间放置一个均匀的空间，上下两端没有空间
space-evenly：在每个栅格项目之间放置一个均匀的空间，上下两端放置一个均匀的空间
案例：使用grid布局实现sticky footer
<style>
.wrap{
min-height: 100%;
display: grid;
grid-template-rows: auto 1fr auto;
}
.wrap div{
border: 1px solid #000;
min-height: 100px;
}
</style>
<div class="wrap">
<div class="header">header</div>
<div class="content">content</div>
<div class="footer">footer</div>
</div>
image.png
本文参考
强大的display:grid
