网格布局（Grid）是最强大的 CSS 布局方案。
它将网页划分成一个个网格，可以任意组合不同的网格，做出各种各样的布局。以前，只能通过复杂的 CSS 框架达到的效果，现在浏览器内置了
上图这样的布局，
容器和项目
采用网格布局的区域，称为"容器"（container）。容器内部采用网格定位的子元素，称为"项目"（item）
<div>
<div><p>1</p></div>
<div><p>2</p></div>
<div><p>3</p></div>
</div>
最外层的<div>元素就是容器，内层的三个<div>元素就是项目
行和列
容器里面的水平区域称为"行"（row），垂直区域称为"列"（column）
水平的深色区域就是"行"，垂直的深色区域就是"列"
单元格
行和列的交叉区域，称为"单元格"（cell）。
正常情况下，n行和m列会产生n x m个单元格。比如，3行3列会产生9个单元格
网格线
划分网格的线，称为"网格线"（grid line）。水平网格线划分出行，垂直网格线划分出列。
正常情况下，n行有n + 1根水平网格线，m列有m + 1根垂直网格线，比如三行就有四根水平网格线
一个 4 x 4 的网格，共有5根水平网格线和5根垂直网格线
一、容器属性
容器指定了网格布局以后，接着就要划分行和列
grid-template-columns属性定义每一列的列宽
grid-template-rows属性定义每一行的行高
除了使用绝对单位，也可以使用百分比
#container {
display: grid;
grid-template-columns: 33.33% 33.33% 33.33%;
grid-template-rows: 33.33% 33.33% 33.33%;
}
repeat()
有时候，重复写同样的值非常麻烦，尤其网格很多时。这时，可以使用repeat()函数，简化重复的值
#container {
display: grid;
grid-template-columns: repeat(3, 33.33%);
grid-template-rows: repeat(3, 33.33%);
}
auto-fill 关键字
有时，单元格的大小是固定的，但是容器的大小不确定。如果希望每一行（或每一列）容纳尽可能多的单元格，这时可以使用auto-fill关键字表示自动填充
#container {
display: grid;
grid-template-columns: repeat(auto-fill, 100px);
}
fr 关键字
为了方便表示比例关系，网格布局提供了fr关键字（fraction 的缩写，意为"片段"）。如果两列的宽度分别为1fr和2fr，就表示后者是前者的两倍
#container {
display: grid;
grid-template-columns: 1fr 2fr 3fr;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#container{
display: grid;
/* display: inline-grid; */
grid-template-columns: 200px 200px 200px;
grid-template-rows: 100px 100px 100px;
/* grid-template-rows: 33.3% 33.3% 33.3%;
grid-template-columns: 200px 200px 200px; */
/* grid-template-rows: repeat(3,200px);
grid-template-columns: repeat(3,100px); */
/* grid-template-rows: repeat(auto-fill,200px);
grid-template-columns: repeat(auto-fill,400px); */
/* grid-template-rows: 100px 100px;
grid-template-columns: 1fr 1fr 1fr 2fr 3fr; */
}
.item{
font-size: 50px;
text-align: center;
border: 1px solid #e5e4e9;
}
.item-1{
background-color: aqua;
}
.item-2{
background-color: blue;
}
.item-3{
background-color: orange;
}
.item-4{
background-color: green;
}
.item-5{
background-color: greenyellow;
}
.item-6{